/* ==========================================================================
   MENU CONTENT STYLES
   ========================================================================== */

 .menu-content {
     padding: var(--spacing-2xl) 0;
     background-color: var(--color-background-primary);
 }

 .menu-content__container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 var(--spacing-lg);
 }

 .menu-content__empty {
     text-align: center;
     padding: var(--spacing-3xl) var(--spacing-lg);
 }

 .menu-content__empty svg {
     color: var(--color-gray-400);
     margin-bottom: var(--spacing-lg);
 }

 .menu-content__empty h3 {
     font-size: var(--font-size-xl);
     font-weight: 600;
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-sm);
 }

 .menu-content__empty p {
     color: var(--color-text-secondary);
     margin-bottom: var(--spacing-xl);
 }

 /* Menu Note Card */
 .menu-note-section {
     padding: var(--spacing-2xl) 0 0;
     background-color: var(--color-background-primary);
 }

 .menu-note-section__container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 var(--spacing-lg);
 }

 .menu-note-card {
     background-color: var(--color-background-accent);
     border: 1px solid var(--color-border-light);
     border-radius: 12px;
     padding: var(--spacing-xl);
     margin-bottom: 0;
 }

 .menu-note-card__title {
     font-size: var(--font-size-lg);
     font-weight: 700;
     color: var(--color-primary-green);
     margin-bottom: var(--spacing-md);
 }

 .menu-note-card__content {
     color: var(--color-text-primary);
     font-size: var(--font-size-base);
     line-height: 1.6;
 }

 /* Menu Allergy Card */
 .menu-allergy-section {
     padding: 0 0 var(--spacing-2xl);
     background-color: var(--color-background-primary);
 }

 .menu-allergy-section__container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 var(--spacing-lg);
 }

 .menu-allergy-card {
     background-color: var(--color-background-accent);
     border: 1px solid var(--color-border-light);
     border-radius: 12px;
     padding: var(--spacing-xl);
     text-align: center;
 }

 .menu-allergy-card p {
     color: var(--color-text-primary);
     font-size: var(--font-size-base);
     margin: 0;
 }

 .menu-allergy-card__link {
     color: var(--color-primary-green);
     font-weight: 600;
     text-decoration: underline;
     transition: color 0.2s ease;
 }

 .menu-allergy-card__link:hover {
     color: var(--color-primary-green-dark);
 }

 /* Menu Course Card */
 .menu-course-card {
     background-color: var(--color-gray-50);
     border: 1px solid var(--color-border-light);
     border-radius: 12px;
     padding: var(--spacing-2xl);
     margin-bottom: var(--spacing-2xl);
 }

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

 .menu-course-card__title {
     font-family: var(--font-family-secondary);
     font-size: var(--font-size-2xl);
     font-weight: 700;
     color: var(--color-primary-green);
     margin-bottom: var(--spacing-xl);
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .menu-course-card__dishes {
     max-width: 100%;
 }

 .menu-course-card__empty {
     text-align: center;
     color: var(--color-text-secondary);
     font-style: italic;
     padding: var(--spacing-xl);
 }

 .menu-divider {
     text-align: center;
     margin: var(--spacing-xl) 0;
     position: relative;
 }

 .menu-divider span {
     display: inline-block;
     padding: 0 var(--spacing-md);
     font-weight: 600;
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     background-color: var(--color-gray-50);
     position: relative;
     z-index: 1;
 }

 .menu-divider::before {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 50%;
     height: 1px;
     background-color: var(--color-border-light);
     z-index: 0;
 }

 .menu-dish {
     padding: var(--spacing-lg) 0;
     border-bottom: 1px solid var(--color-border-light);
 }

 .menu-dish:last-child {
     border-bottom: none;
 }

 .menu-dish__header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-md);
     margin-bottom: var(--spacing-sm);
 }

 .menu-dish__name {
     font-size: var(--font-size-lg);
     font-weight: 600;
     color: var(--color-text-primary);
     flex: 1;
 }

 .menu-dish__price {
     font-size: var(--font-size-lg);
     font-weight: 700;
     color: var(--color-primary-green);
     white-space: nowrap;
 }

 .menu-dish__description {
     color: var(--color-text-secondary);
     font-size: var(--font-size-base);
     line-height: 1.6;
     margin-top: var(--spacing-xs);
     margin-bottom: var(--spacing-sm);
 }

 .menu-dish__labels {
     display: flex;
     gap: var(--spacing-sm);
     flex-wrap: wrap;
     margin-top: var(--spacing-sm);
 }

 .dietary-label {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 12px;
     font-size: var(--font-size-sm);
     font-weight: 600;
     border-radius: 20px;
     background-color: var(--color-white);
     color: var(--color-text-primary);
     border: 2px solid var(--color-border-medium);
 }

 .dietary-label__icon {
     width: 16px;
     height: 16px;
     display: block;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .menu-content {
         padding: var(--spacing-xl) 0;
     }

     .menu-note-section {
         padding: var(--spacing-xl) 0 0;
     }

     .menu-note-card {
         padding: var(--spacing-lg);
     }

     .menu-course-card {
         padding: var(--spacing-lg);
     }

     .menu-course-card__title {
         font-size: var(--font-size-xl);
     }

     .menu-dish__header {
         flex-direction: column;
         align-items: flex-start;
     }

     .menu-dish__price {
         margin-top: var(--spacing-xs);
     }
 }

 /* ==========================================================================
   MENU PAGE HERO SECTION - Reduced Height
   ========================================================================== */

 /* Menu page hero with reduced height to match eateries page */
 .restaurant-hero.menu-page-hero {
     min-height: 60vh;
 }

 /* ==========================================================================
   GOZOFOOD.COM - CORE UTILITIES
   ==========================================================================
   
   Consolidated core utilities including:
   - CSS Custom Properties (variables.css)
   - Font Declarations (fonts.css)
   - Global Scrollbar Fixes (scrollbar-fix.css)
   
   This file contains foundational styles that other files depend on.
   
   Author: Gozofood.com Development Team
   Version: 1.0 - Consolidated
   Last Updated: September 2025
   ========================================================================== */

 /* ==========================================================================
   CSS CUSTOM PROPERTIES (from variables.css)
   ========================================================================== */

 :root {
     /* ===== COLOR PALETTE ===== */
     /* Primary Colors - Main brand colors */
     --color-primary-green: #2D5A27;
     /* Deep forest green - main brand color */
     --color-primary-green-light: #4A7C59;
     /* Lighter version of primary green */
     --color-primary-green-dark: #1A3318;
     /* Darker version of primary green */
     --color-secondary-green: #7CB342;
     /* Fresh lime green - accent color */
     --color-primary-yellow: #FFC107;
     /* Warm golden yellow - highlight color */
     --color-primary-yellow-rgb: 255, 193, 7;
     /* RGB values for rgba usage */
     --color-orange-accent: #FF8F00;
     /* Vibrant orange - action color */

     /* Neutral Colors - Background and text colors */
     --color-white: #FFFFFF;
     /* Pure white */
     --color-black: #000000;
     /* Pure black */
     --color-gray-50: #F8F9FA;
     /* Very light gray */
     --color-gray-100: #F1F3F4;
     /* Light gray */
     --color-gray-200: #E8EAED;
     /* Medium light gray */
     --color-gray-300: #DADCE0;
     /* Medium gray */
     --color-gray-400: #BDC1C6;
     /* Medium dark gray */
     --color-gray-500: #9AA0A6;
     /* Dark gray */
     --color-gray-600: #80868B;
     /* Darker gray */
     --color-gray-700: #5F6368;
     /* Very dark gray */
     --color-gray-800: #3C4043;
     /* Near black gray */
     --color-gray-900: #202124;
     /* Almost black */

     /* Text Colors - Semantic text colors */
     --color-text-primary: #2c3e50;
     /* Main text color - dark blue-gray */
     --color-text-secondary: #7f8c8d;
     /* Secondary text color - medium gray */
     --color-text-muted: #95a5a6;
     /* Muted text color - light gray */
     --color-text-light: #ecf0f1;
     /* Light text color for dark backgrounds */

     /* Background Colors - Page and section backgrounds */
     --color-background-primary: #FFFFFF;
     /* Main page background */
     --color-background-secondary: #F8F9FA;
     /* Section backgrounds */
     --color-background-accent: #FFF9E6;
     /* Accent background (light yellow) */
     --color-neutral-bg: #FAF7F2;
     /* Cream/neutral background */
     --color-neutral-bg-rgb: 250, 247, 242;
     /* RGB values for rgba usage */

     /* Border Colors - Dividers and borders */
     --color-border-light: #E8EAED;
     /* Light borders */
     --color-border-medium: #DADCE0;
     /* Medium borders */
     --color-border-dark: #BDC1C6;
     /* Dark borders */

     /* ===== TYPOGRAPHY ===== */
     /* Font Families */
     --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     --font-family-secondary: 'Source Serif 4', 'Times New Roman', serif;
     --font-family-accent: 'Source Serif 4', 'Times New Roman', serif;
     /* Alias for secondary font used across site */
     --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

     /* Font Weights */
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;

     /* Font Sizes - Responsive typography scale */
     --font-size-xs: 0.75rem;
     /* 12px */
     --font-size-sm: 0.875rem;
     /* 14px */
     --font-size-base: 1rem;
     /* 16px - base size */
     --font-size-lg: 1.125rem;
     /* 18px */
     --font-size-xl: 1.25rem;
     /* 20px */
     --font-size-2xl: 1.5rem;
     /* 24px */
     --font-size-3xl: 1.875rem;
     /* 30px */
     --font-size-4xl: 2.25rem;
     /* 36px */
     --font-size-5xl: 3rem;
     /* 48px */
     --font-size-6xl: 3.75rem;
     /* 60px */
     --font-size-7xl: 4.5rem;
     /* 72px */

     /* Line Heights */
     --line-height-tight: 1.25;
     --line-height-snug: 1.375;
     --line-height-normal: 1.5;
     --line-height-relaxed: 1.625;
     --line-height-loose: 2;

     /* ===== SPACING ===== */
     /* Spacing scale based on 4px grid */
     --spacing-xs: 0.25rem;
     /* 4px */
     --spacing-sm: 0.5rem;
     /* 8px */
     --spacing-md: 1rem;
     /* 16px */
     --spacing-lg: 1.5rem;
     /* 24px */
     --spacing-xl: 2rem;
     /* 32px */
     --spacing-2xl: 2.5rem;
     /* 40px */
     --spacing-3xl: 3rem;
     /* 48px */
     --spacing-4xl: 4rem;
     /* 64px */
     --spacing-5xl: 5rem;
     /* 80px */
     --spacing-6xl: 6rem;
     /* 96px */

     /* ===== LAYOUT ===== */
     /* Container Widths */
     --container-sm: 576px;
     --container-md: 768px;
     --container-lg: 992px;
     --container-xl: 1200px;
     --container-2xl: 1400px;

     /* Z-Index Scale */
     --z-index-dropdown: 1000;
     --z-index-sticky: 1020;
     --z-index-fixed: 1030;
     --z-index-modal-backdrop: 1040;
     --z-index-modal: 1050;
     --z-index-popover: 1060;
     --z-index-tooltip: 1070;
     --z-index-toast: 1080;

     /* ===== DESIGN SYSTEM ===== */
     /* Border Radius */
     --border-radius-sm: 0.25rem;
     /* 4px */
     --border-radius-md: 0.5rem;
     /* 8px */
     --border-radius-lg: 0.75rem;
     /* 12px */
     --border-radius-xl: 1rem;
     /* 16px */
     --border-radius-full: 9999px;
     /* Full rounded */

     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

     /* Transitions */
     --transition-fast: 0.15s ease-in-out;
     --transition-normal: 0.3s ease-in-out;
     --transition-slow: 0.5s ease-in-out;

     /* Animation Easing Functions */
     --ease-in-out-cubic: cubic-bezier(0.4, 0, 0.2, 1);
     --ease-out-cubic: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-cubic: cubic-bezier(0.4, 0, 1, 1);
 }

 /* ==========================================================================
   FONT DECLARATIONS (from fonts.css)
   ========================================================================== */

 /* Inter Font Family - Primary font for UI text */
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 }

 /* Source Serif 4 - Secondary font for headings and serif text */
 @font-face {
     font-family: 'Source Serif 4';
     font-style: normal;
     font-weight: 200 900;
     font-display: swap;
     src: url('../fonts/SourceSerif4-VariableFont.ttf') format('truetype-variations');
 }

 @font-face {
     font-family: 'Source Serif 4';
     font-style: italic;
     font-weight: 200 900;
     font-display: swap;
     src: url('../fonts/SourceSerif4-Italic-VariableFont_opsz.wght.ttf') format('truetype-variations');
 }

 /* Roboto Mono - Monospace font for code and technical text */
 @font-face {
     font-family: 'Roboto Mono';
     font-style: normal;
     font-weight: 100 700;
     font-display: swap;
     src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations');
 }

 @font-face {
     font-family: 'Roboto Mono';
     font-style: italic;
     font-weight: 100 700;
     font-display: swap;
     src: url('../fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
 }

 /* ==========================================================================
   GLOBAL SCROLLBAR FIXES (from scrollbar-fix.css)
   ========================================================================== */

 /* Global scrollbar styling for consistent appearance across browsers */
 html {
     scrollbar-width: thin;
     scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }

 html::-webkit-scrollbar {
     width: 8px;
 }

 html::-webkit-scrollbar-track {
     background: transparent;
 }

 html::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 4px;
 }

 html::-webkit-scrollbar-thumb:hover {
     background-color: rgba(0, 0, 0, 0.3);
 }

 /* Hide scrollbars for specific navigation elements */
 .nav__desktop,
 .nav__desktop-menu,
 .nav__mobile,
 .nav__mobile-content {
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .nav__desktop::-webkit-scrollbar,
 .nav__desktop-menu::-webkit-scrollbar,
 .nav__mobile::-webkit-scrollbar,
 .nav__mobile-content::-webkit-scrollbar {
     display: none;
 }










 /* ==========================================================================
   GOZOFOOD.COM - NAVIGATION & HEADER
   ==========================================================================
   
   Consolidated navigation and header styles combining:
   - Navigation Styles (new-navigation.css)
   - Header Fixes (simple-header.css)
   
   This file handles all header and navigation functionality.
   
   Author: Gozofood.com Development Team
   Version: 1.0 - Consolidated
   Last Updated: September 2025
   ========================================================================== */

 /* ==========================================================================
   HEADER FOUNDATION
   ========================================================================== */

 /* Ensure header stays fixed at all times */
 .header {
     display: block !important;
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     width: 100% !important;
     height: 70px !important;
     background-color: rgba(255, 255, 255, 0.98) !important;
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
     z-index: 9999 !important;
     transform: none !important;
     transition: box-shadow 0.3s ease;
     opacity: 1 !important;
     visibility: visible !important;
     overflow: visible !important;
 }

 /* Header scrolled state */
 .header--scrolled {
     background-color: rgba(255, 255, 255, 1) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
 }

 .header--scrolled::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, transparent, var(--color-primary-yellow), transparent);
     border-radius: 100px;
     opacity: 0.8;
     z-index: 1;
 }

 /* Header container */
 .header__container {
     max-width: 1200px;
     height: 100%;
     margin: 0 auto;
     padding: 0 var(--spacing-md);
     box-sizing: border-box;
     overflow: visible;
 }

 /* ==========================================================================
   MAIN NAVIGATION
   ========================================================================== */

 .nav {
     height: 100%;
     position: relative;
     overflow: visible;
 }

 .nav__container {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     overflow: visible;
 }

 /* ==========================================================================
   BRAND & LOGO
   ========================================================================== */

 .nav__brand {
     display: flex;
     align-items: center;
     height: 100%;
     z-index: 1002;
 }

 .nav__logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: var(--color-primary-green);
     font-family: var(--font-family-secondary);
     font-weight: var(--font-weight-bold);
     font-size: var(--font-size-3xl);
     transition: transform 0.3s ease;
 }

 .nav__logo:hover,
 .nav__logo:focus {
     transform: translateY(-2px);
     color: var(--color-primary-green);
     text-decoration: none;
 }

 .nav__logo-image {
     height: 40px;
     width: auto;
     margin-right: var(--spacing-xs);
 }

 /* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */

 .nav__desktop {
     display: flex;
     align-items: center;
     height: 100%;
     gap: var(--spacing-lg);
     overflow: visible;
 }

 .nav__desktop-menu {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
     gap: var(--spacing-md);
     height: 100%;
     align-items: center;
     overflow: visible;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .nav__desktop-menu::-webkit-scrollbar {
     display: none;
 }

 .nav__desktop-item {
     height: 100%;
     display: flex;
     align-items: center;
     position: relative;
 }

 .nav__desktop-link {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 var(--spacing-sm);
     text-decoration: none !important;
     border: none !important;
     border-bottom: none !important;
     outline: none !important;
     color: var(--color-text-primary);
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-base);
     transition: color 0.3s ease;
     position: relative;
     box-shadow: none !important;
 }

 .nav__desktop-link::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--color-primary-yellow);
     transition: all 0.3s ease;
     transform: translateX(-50%) translateY(10px);
 }

 .nav__desktop-link:hover,
 .nav__desktop-link:focus {
     color: var(--color-primary-green);
     text-decoration: none !important;
     border-bottom: none !important;
     box-shadow: none !important;
 }

 /* Additional override to ensure no global link styles interfere */
 .nav .nav__desktop-link:hover,
 .nav .nav__desktop-link:focus,
 .header .nav__desktop-link:hover,
 .header .nav__desktop-link:focus {
     text-decoration: none !important;
     border-bottom: none !important;
     border: none !important;
 }

 .nav__desktop-link:hover::after,
 .nav__desktop-link:focus::after,
 .nav__desktop-link--active::after {
     width: 100%;
 }

 .nav__desktop-link--active {
     color: var(--color-primary-green);
     text-decoration: none !important;
     border-bottom: none !important;
 }

 /* ==========================================================================
   SEARCH FUNCTIONALITY
   ========================================================================== */

 .nav__search-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, 0.05);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     color: var(--color-text-primary);
     transition: all 0.3s ease;
 }

 .nav__search-btn:hover,
 .nav__search-btn:focus {
     background-color: rgba(0, 0, 0, 0.1);
     color: var(--color-primary-green);
     outline: none;
 }

 /* Search form positioned outside header */
 .nav__search-form {
     position: fixed !important;
     top: 70px !important;
     left: 0 !important;
     right: 0 !important;
     width: 100% !important;
     background-color: rgba(255, 255, 255, 0.5) !important;
     backdrop-filter: blur(10px) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
     border-radius: 0 !important;
     z-index: 1001 !important;
     padding: 20px !important;

     /* Hidden by default */
     opacity: 0 !important;
     visibility: hidden !important;
     transform: translateY(-10px) !important;
     transition: all 0.3s ease !important;
 }

 .nav__search-form--active {
     opacity: 1 !important;
     visibility: visible !important;
     transform: translateY(0) !important;
 }

 .nav__search-form-container {
     max-width: 600px !important;
     margin: 0 auto !important;
     position: relative !important;
     border-radius: 0 !important;
 }

 .nav__search-input {
     width: 100% !important;
     padding: 12px 50px 12px 20px !important;
     border: 2px solid rgba(0, 0, 0, 0.1) !important;
     border-radius: 0 !important;
     font-size: 16px !important;
     outline: none !important;
     transition: border-color 0.3s ease !important;
 }

 .nav__search-input:focus {
     border-color: var(--color-primary-green) !important;
 }

 .nav__search-submit,
 .nav__search-close {
     position: absolute !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     background: none !important;
     border: none !important;
     cursor: pointer !important;
     padding: 8px !important;
     color: #666 !important;
     transition: color 0.3s ease !important;
 }

 .nav__search-submit {
     right: 45px !important;
 }

 .nav__search-close {
     right: 10px !important;
 }

 .nav__search-submit:hover,
 .nav__search-close:hover {
     color: var(--color-primary-green) !important;
 }

 /* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */

 /* Mobile toggle button */
 .navigation__toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 22px;
     background: transparent;
     border: none;
     padding: var(--spacing-xs);
     cursor: pointer;
     z-index: 1003;
 }

 .navigation__toggle-line {
     width: 100%;
     height: 3px;
     background: var(--color-text-primary);
     transition: all 0.3s ease;
     transform-origin: center;
 }

 .navigation__toggle--active .navigation__toggle-line:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
     width: 100%;
 }

 .navigation__toggle--active .navigation__toggle-line:nth-child(2) {
     opacity: 0;
 }

 .navigation__toggle--active .navigation__toggle-line:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
     width: 100%;
 }

 /* Mobile Menu - Hidden by Default */
 .navigation__menu {
     display: none;
 }

 /* Mobile navigation panel */
 .navigation__menu-mobile {
     position: fixed;
     top: 0;
     right: -100%;
     width: 320px;
     max-width: 85vw;
     height: 100vh;
     background: var(--color-white);
     box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
     z-index: 1002;
     transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
     display: flex;
     flex-direction: column;
 }

 .navigation__menu-mobile::-webkit-scrollbar {
     display: none;
 }

 .navigation__menu-mobile.active,
 .navigation__menu-mobile.navigation__menu--open {
     right: 0;
 }

 .nav__mobile-header {
     padding: var(--spacing-lg);
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     width: 100%;
     box-sizing: border-box;
 }

 .nav__mobile-brand {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     flex: 1;
     min-width: 0;
     overflow: hidden;
 }

 /* Mobile close button */
 .nav__mobile-close {
     background: none;
     border: none;
     padding: var(--spacing-xs);
     cursor: pointer;
     color: var(--color-text-primary);
     border-radius: var(--border-radius-md);
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
 }

 .nav__mobile-close:hover,
 .nav__mobile-close:focus {
     background: rgba(0, 0, 0, 0.08);
     color: var(--color-primary-green);
     transform: scale(1.05);
     outline: none;
 }

 .nav__mobile-close:active {
     transform: scale(0.95);
     background: rgba(0, 0, 0, 0.12);
 }

 .nav__mobile-logo {
     width: 32px;
     height: 32px;
 }

 .nav__mobile-title {
     font-family: var(--font-family-secondary);
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-bold);
     color: var(--color-primary-green);
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .nav__mobile-content {
     padding: var(--spacing-md);
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
     flex: 1;
     width: 100%;
     box-sizing: border-box;
 }

 .nav__mobile-content::-webkit-scrollbar {
     display: none;
 }

 .nav__mobile-menu {
     list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
     box-sizing: border-box;
 }

 .nav__mobile-item {
     margin-bottom: var(--spacing-xs);
     opacity: 0;
     transform: translateX(20px);
     animation: slideInLeft 0.3s ease forwards;
     animation-delay: calc(var(--item-index, 0) * 0.1s);
     width: 100%;
     box-sizing: border-box;
 }

 @keyframes slideInLeft {
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .nav__mobile-link {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-md);
     text-decoration: none;
     color: var(--color-text-primary);
     border-radius: var(--border-radius-md);
     transition: all 0.3s ease;
     font-weight: var(--font-weight-medium);
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     word-wrap: break-word;
 }

 .nav__mobile-link:hover,
 .nav__mobile-link:focus,
 .nav__mobile-link--active {
     background: transparent;
     color: var(--color-primary-green);
     transform: translateX(4px);
 }

 .nav__mobile-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 20px;
     height: 20px;
 }

 /* Mobile navigation footer */
 .nav__mobile-footer {
     padding: var(--spacing-lg);
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     margin-top: auto;
     flex-shrink: 0;
     width: 100%;
     box-sizing: border-box;
 }

 .nav__mobile-social {
     display: flex;
     gap: var(--spacing-sm);
     justify-content: center;
     margin-bottom: var(--spacing-lg);
 }

 .nav__mobile-social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, 0.05);
     border-radius: 50%;
     color: var(--color-text-secondary);
     transition: all 0.3s ease;
 }

 .nav__mobile-social-link:hover,
 .nav__mobile-social-link:focus {
     background: transparent;
     color: var(--color-primary-green);
     transform: scale(1.1);
 }

 .nav__mobile-search {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-sm);
     background: rgba(0, 0, 0, 0.05);
     border-radius: var(--border-radius-md);
     width: 100%;
     box-sizing: border-box;
 }

 .nav__mobile-search-input {
     flex: 1;
     border: none;
     background: transparent;
     padding: var(--spacing-xs);
     font-size: var(--font-size-sm);
     outline: none;
 }

 .nav__mobile-search-icon {
     color: var(--color-text-secondary);
 }

 /* ==========================================================================
    DESKTOP PROFILE DROPDOWN
    ========================================================================== */

 .nav__desktop-item--profile {
     position: relative;
 }

 .nav__profile-toggle {
     display: flex;
     align-items: center;
     gap: var(--spacing-xs);
     padding: var(--spacing-xs) var(--spacing-sm);
     background: transparent;
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius-lg);
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: var(--font-family-primary);
     font-size: var(--font-size-sm);
     color: var(--color-text-primary);
     height: 40px;
 }

 .nav__profile-toggle:hover,
 .nav__profile-toggle:focus {
     background: var(--color-gray-50);
     border-color: var(--color-primary-green);
     outline: none;
 }

 .nav__profile-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     background: linear-gradient(135deg, var(--color-primary-green), var(--color-secondary-green));
     border-radius: 50%;
     flex-shrink: 0;
 }

 .nav__profile-initial {
     color: white;
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-sm);
 }

 .nav__profile-name {
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-weight: var(--font-weight-medium);
 }

 .nav__profile-arrow {
     transition: transform 0.3s ease;
     flex-shrink: 0;
 }

 .nav__profile-toggle[aria-expanded="true"] .nav__profile-arrow {
     transform: rotate(180deg);
 }

 .nav__profile-dropdown {
     position: absolute;
     top: calc(100% + var(--spacing-xs));
     right: 0;
     min-width: 200px;
     background: white;
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 10000;
     overflow: hidden;
     pointer-events: none;
 }

 /* Show dropdown when aria-expanded is true */
 .nav__profile-toggle[aria-expanded="true"]+.nav__profile-dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
 }

 .nav__profile-dropdown-item {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     width: 100%;
     padding: var(--spacing-sm) var(--spacing-md);
     text-decoration: none;
     color: var(--color-text-primary);
     font-size: var(--font-size-sm);
     transition: all 0.2s ease;
     border: none;
     background: transparent;
     cursor: pointer;
     text-align: left;
     font-family: var(--font-family-primary);
 }

 .nav__profile-dropdown-item:hover {
     background: var(--color-gray-50);
     color: var(--color-primary-green);
 }

 .nav__profile-dropdown-item--logout {
     border-top: 1px solid var(--color-border-light);
     color: #dc2626;
 }

 .nav__profile-dropdown-item--logout:hover {
     background: #fef2f2;
     color: #991b1b;
 }

 .nav__profile-logout-form {
     margin: 0;
 }

 .nav__profile-dropdown-item svg {
     flex-shrink: 0;
 }

 /* ==========================================================================
    MOBILE PROFILE SECTION
    ========================================================================== */

 .nav__mobile-profile {
     padding: var(--spacing-lg);
     border-top: 2px solid var(--color-border-light);
     margin-top: var(--spacing-md);
     background: var(--color-gray-50);
 }

 .nav__mobile-profile-header {
     display: flex;
     align-items: center;
     gap: var(--spacing-md);
     margin-bottom: var(--spacing-lg);
 }

 .nav__mobile-profile-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     background: linear-gradient(135deg, var(--color-primary-green), var(--color-secondary-green));
     border-radius: 50%;
     flex-shrink: 0;
 }

 .nav__mobile-profile-initial {
     color: white;
     font-weight: var(--font-weight-bold);
     font-size: var(--font-size-xl);
 }

 .nav__mobile-profile-info {
     flex: 1;
     min-width: 0;
 }

 .nav__mobile-profile-name {
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-xs);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .nav__mobile-profile-email {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .nav__mobile-profile-actions {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xs);
 }

 .nav__mobile-profile-link {
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-sm) var(--spacing-md);
     text-decoration: none;
     color: var(--color-text-primary);
     font-size: var(--font-size-sm);
     background: white;
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius-md);
     transition: all 0.3s ease;
     cursor: pointer;
     width: 100%;
     box-sizing: border-box;
     font-family: var(--font-family-primary);
     font-weight: var(--font-weight-medium);
 }

 .nav__mobile-profile-link:hover {
     background: var(--color-primary-green);
     color: white;
     border-color: var(--color-primary-green);
     transform: translateX(4px);
 }

 .nav__mobile-profile-link--logout {
     color: #dc2626;
     border-color: #fecaca;
 }

 .nav__mobile-profile-link--logout:hover {
     background: #dc2626;
     color: white;
     border-color: #dc2626;
 }

 .nav__mobile-profile-logout-form {
     margin: 0;
 }

 .nav__mobile-profile-link svg {
     flex-shrink: 0;
 }

 /* Backdrop */
 .navigation__backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1001;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .navigation__backdrop--visible {
     opacity: 1;
     visibility: visible;
 }

 /* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

 @media (max-width: 991px) {
     .nav__desktop {
         display: none;
     }

     .navigation__toggle {
         display: flex;
     }
 }

 @media (max-width: 768px) {
     .navigation__menu-mobile {
         width: 280px;
         max-width: 90vw;
     }

     .header__container {
         padding: 0 var(--spacing-sm);
     }

     .nav__mobile-header {
         padding: var(--spacing-md);
     }

     .nav__mobile-content {
         padding: var(--spacing-sm);
     }

     .nav__mobile-footer {
         padding: var(--spacing-md);
     }
 }










 /* ==========================================================================
   GOZOFOOD.COM - MAIN STYLESHEET
   ==========================================================================
   
   Description: Modern, clean CSS for food website template
   Methodology: BEM (Block Element Modifier) naming conventions
   Architecture: ITCSS (Inverted Triangle CSS) inspired structure
   
   File Structure:
   1. Reset and Base Styles
   2. Typography System
   3. Layout Components
   4. Header & Navigation
   5. Hero Section
   6. Button Components
   7. Featured Content Section
   8. Responsive Design
   
   Color Palette:
   - Primary Green: #2D5A27 (deep forest green)
   - Secondary Green: #7CB342 (fresh lime green)
   - Primary Yellow: #FFC107 (warm golden yellow)
   - Secondary Yellow: #FFF59D (light cream yellow)
   - Orange Accent: #FF8F00 (vibrant orange)
   - Neutral Background: #F8F9FA (off-white)
   - Text Primary: #2C3E50 (dark blue-gray)
   
   Typography:
   - Primary Font: Inter (sans-serif) - for body text and UI
   - Secondary Font: Playfair Display (serif) - for headings
   - Accent Font: Dancing Script (cursive) - for taglines
   
   Breakpoints:
   - Mobile: 0-768px
   - Tablet: 768-1023px
   - Desktop: 1024px+
   
   Author: Gozofood.com Development Team
   Version: 1.0
   Last Updated: September 2025
   ========================================================================== */

 /* ==========================================================================
   1. RESET AND BASE STYLES
   ==========================================================================
   
   Provides a consistent foundation across all browsers by:
   - Resetting default margins and paddings
   - Setting consistent box-sizing
   - Establishing base typography
   - Enabling smooth scrolling
   - Optimizing font rendering
   ========================================================================== */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     /* Ensures padding and border are included in element's total width/height */
 }

 html {
     font-size: 16px;
     /* Base font size for rem calculations */
     scroll-behavior: smooth;
     /* Enables smooth scrolling for anchor links */
     overflow-x: hidden;
     /* Prevent horizontal scrolling */
     width: 100%;
     position: relative;
     overflow-y: auto;
     /* Ensure vertical scrolling works properly */
     max-width: 100vw;
     /* Ensure no width overflow */
 }

 body {
     margin: 0;
     padding: 0;
     padding-top: 70px;
     /* Add space for fixed header */
     font-family: var(--font-family-primary);
     /* Inter font for body text */
     font-size: var(--font-size-base);
     /* 16px base font size */
     font-weight: var(--font-weight-normal);
     /* 400 weight */
     overflow-x: hidden !important;
     /* Prevent horizontal scrolling */
     width: 100%;
     max-width: 100vw;
     /* Prevent horizontal overflow */
     line-height: var(--line-height-normal);
     /* 1.5 line height for readability */
     color: var(--color-text-primary);
     /* Dark blue-gray text color */
     background-color: var(--color-white);
     /* White background */
     -webkit-font-smoothing: antialiased;
     /* Improves font rendering on WebKit browsers */
     -moz-osx-font-smoothing: grayscale;
     /* Improves font rendering on Firefox/macOS */
     position: relative;
     /* Ensure proper positioning context */
     scrollbar-width: none;
     /* Hide Firefox scrollbar */
     -ms-overflow-style: none;
     /* Hide IE and Edge scrollbar */
 }

 /* Hide scrollbar for Chrome, Safari and Opera */
 body::-webkit-scrollbar {
     display: none;
 }

 /* Prevent scroll when mobile menu is open */
 body.scroll-lock {
     overflow: hidden;
     /* Prevents background scrolling when mobile menu is active */
 }

 /* Skip link for accessibility - hidden by default, visible on focus */
 .skip-link {
     position: absolute;
     top: -40px;
     /* Hidden above viewport */
     left: 6px;
     background: var(--color-primary-green);
     color: var(--color-white);
     padding: 8px;
     text-decoration: none;
     border-radius: var(--border-radius-sm);
     z-index: 1000;
     transition: top var(--transition-fast);
 }

 .skip-link:focus {
     top: 6px;
     /* Slides down into view when focused */
 }

 /* Visually hidden elements (for screen readers) */
 .visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
 }

 /* Utility class to disable text decoration */
 .no-text-decoration,
 .no-text-decoration:hover,
 .no-text-decoration:focus {
     text-decoration: none !important;
 }

 /* ==========================================================================
2. TYPOGRAPHY SYSTEM
==========================================================================

Establishes a consistent typographic hierarchy using:
- Semantic heading structure (h1-h6)
- Consistent spacing and line heights
- Font family assignments based on content type
- Responsive font sizing using CSS custom properties
- Accessible color contrast ratios

Font Usage:
- Headings: Playfair Display (serif) for elegance
- Body text: Inter (sans-serif) for readability
- Links: Inherit with hover states for interaction feedback
========================================================================== */

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 0 0 var(--spacing-md) 0;
     /* Consistent bottom margin */
     font-family: var(--font-family-secondary);
     /* Playfair Display for headings */
     font-weight: var(--font-weight-bold);
     /* 700 weight for emphasis */
     line-height: var(--line-height-tight);
     /* 1.25 for better heading appearance */
     color: var(--color-text-primary);
     /* Consistent heading color */
 }

 /* Heading size hierarchy - uses CSS custom properties for consistency */
 h1 {
     font-size: var(--font-size-5xl);
     /* 48px - Primary page titles */
 }

 h2 {
     font-size: var(--font-size-4xl);
     /* 36px - Section titles */
 }

 h3 {
     font-size: var(--font-size-3xl);
     /* 30px - Subsection titles */
 }

 h4 {
     font-size: var(--font-size-2xl);
     /* 24px - Card titles */
 }

 h5 {
     font-size: var(--font-size-xl);
     /* 20px - Small headings */
 }

 h6 {
     font-size: var(--font-size-lg);
     /* 18px - Smallest headings */
 }

 /* Paragraph styling */
 p {
     margin: 0 0 var(--spacing-md) 0;
     /* Consistent bottom margin for flow */
 }

 /* Link styling with interaction states */
 a {
     color: var(--color-primary-green);
     /* Brand green for links */
     text-decoration: none;
     /* Clean appearance by default */
     transition: color var(--transition-fast);
     /* Smooth color transitions */
 }

 a:hover,
 a:focus {
     color: var(--color-primary-green-dark);
     /* Darker green on interaction */
     text-decoration: underline;
     /* Underline for clarity on hover/focus */
 }

 /* ==========================================================================
3. LAYOUT COMPONENTS
==========================================================================

Provides the foundational layout structure for the entire site:
- Page wrapper with flexbox for sticky footer
- Main content area that grows to fill available space
- Container utility for consistent content width and padding
- Responsive padding that adapts to different screen sizes

The layout uses modern CSS techniques:
- Flexbox for vertical layout
- CSS custom properties for consistent spacing
- Mobile-first responsive design approach
========================================================================== */

 /* Page wrapper - ensures footer sticks to bottom */
 .page {
     min-height: 100vh;
     /* Full viewport height minimum */
     display: flex;
     flex-direction: column;
     /* Vertical layout */
     overflow-x: hidden;
     /* Prevent horizontal scrolling */
     width: 100%;
     max-width: 100%;
 }

 /* Main content area - grows to fill available space */
 .main {
     flex: 1;
     /* Takes up remaining space, pushing footer down */
 }

 /* Container utility for consistent content width and horizontal padding */
 .container {
     max-width: 1200px;
     /* Maximum content width */
     margin: 0 auto;
     /* Centers content horizontally */
     padding: 0 var(--spacing-md);
     /* 16px horizontal padding on mobile */
     width: 100%;
     box-sizing: border-box;
     /* Include padding in width calculation */
     overflow-x: hidden;
     /* Prevent horizontal scrolling */
 }

 /* Responsive container padding - increases on larger screens */
 @media (min-width: 768px) {
     .container {
         padding: 0 var(--spacing-lg);
         /* 24px padding on tablet+ */
     }
 }

 @media (min-width: 1024px) {
     .container {
         padding: 0 var(--spacing-xl);
         /* 32px padding on desktop+ */
     }
 }

 /* ==========================================================================
4. HEADER & NAVIGATION
==========================================================================

Creates a fixed header with responsive navigation:
- Fixed positioning for persistent access
- Backdrop blur effect for modern appearance
- Responsive design with mobile hamburger menu
- Smooth transitions for scroll-based state changes
- Accessible navigation with proper ARIA attributes

Navigation Features:
- Logo/brand area with image and text
- Horizontal menu on desktop
- Collapsible mobile menu with overlay
- Active state management
- Search functionality
- Smooth hover and focus states
========================================================================== */

 /* ==========================================================================
5. HERO SECTION - Bright & Vibrant Design
========================================================================== */

 /* Hero section with colorful background and animated elements */
 .hero {
     position: relative;
     min-height: 100vh;
     height: 100vh;
     /* Fixed height for better centering */
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background-color: #000;
     /* Fallback color before image loads */
 }

 .hero__background {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
 }

 .hero__background-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     filter: saturate(1.1) contrast(1.05);
     /* Slightly enhance image vibrancy */
     transform: scale(1.01);
     /* Slight scale to prevent any potential border gaps */
     transition: transform 12s ease-out;
     /* Super slow zoom effect */
     animation: slowZoom 20s ease-out forwards;
 }

 @keyframes slowZoom {
     0% {
         transform: scale(1.02);
     }

     100% {
         transform: scale(1.06);
     }
 }

 /* Overlay to enhance text readability while preserving image colors */
 .hero__overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
     /* Stronger gradient for better text visibility */
     z-index: 2;
 }

 .hero__content {
     position: relative;
     z-index: 3;
     text-align: center;
     color: var(--color-white);
     width: 100%;
     height: 100vh;
     max-width: 100vw;
     /* Ensure it doesn't exceed viewport width */
     padding: 0 10px;
     /* Minimal horizontal padding */
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     /* Center vertically */
     overflow: hidden;
     /* Prevent overflow */
 }

 /* Hero content entrance animation */
 @keyframes heroContentEntrance {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero__title {
     font-family: var(--font-family-secondary);
     /* Source Serif Pro */
     font-size: clamp(3.85rem, 13.5vw, 22rem);
     /* Increased by ~10% from previous values */
     font-weight: 700;
     /* Bold weight for Source Serif Pro */
     font-variation-settings: 'opsz' 60, 'wght' 700;
     /* Optimize for large display size */
     line-height: 0.85;
     /* Adjusted line height for better containment */
     margin-bottom: var(--spacing-md);
     /* Reduced margin to give more space to text */
     color: var(--color-white);
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
     /* Subtle shadow for better visibility */
     letter-spacing: -0.02em;
     /* Looser letter spacing to prevent cut-off */
     animation: professionalTitleEntrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
     opacity: 0;
     transform: translateY(30px);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     width: 100%;
     padding: 0;
     /* Remove padding that might cause wrapping */
     text-align: center;
     /* Ensure perfect centering */
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     /* Include padding in width calculations */
 }

 /* Professional title entrance animation with clean, subtle movement */
 @keyframes professionalTitleEntrance {
     0% {
         opacity: 0;
         transform: translateY(20px);
         filter: blur(4px);
     }

     40% {
         opacity: 0.6;
         filter: blur(2px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
         filter: blur(0);
     }
 }

 .hero__title-main {
     display: inline-block;
     /* Changed to inline-block to keep text together */
     transform-origin: center;
     letter-spacing: -0.02em;
     /* Match the updated title letter-spacing */
     animation: titleReveal 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.2s;
     opacity: 0;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
     white-space: nowrap;
     /* Prevent text from wrapping */
     text-align: center;
     padding: 0;
     /* Remove padding that might cause issues */
 }

 /* Professional title reveal animation */
 @keyframes titleReveal {
     0% {
         opacity: 0;
         transform: scale(0.96);
         letter-spacing: -0.04em;
         filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0));
     }

     100% {
         opacity: 1;
         transform: scale(1);
         letter-spacing: -0.02em;
         /* Match our updated letter spacing */
         filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
     }
 }

 .hero__title-dot {
     color: var(--color-primary-yellow);
     display: inline-block;
     animation: dotPulse 2s ease-in-out infinite;
     filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
 }

 @keyframes dotPulse {

     0%,
     100% {
         transform: scale(1);
         filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
     }

     50% {
         transform: scale(1.2);
         filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.8));
     }
 }

 .hero__tagline-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-md);
     animation: taglineWrapperFade 1.2s ease-out 1s forwards;
     opacity: 0;
     margin-top: 2rem;
     width: 100%;
 }

 .hero__tagline-line {
     height: 1px;
     width: clamp(30px, 5vw, 80px);
     background-color: var(--color-primary-yellow);
     animation: lineGrow 1.8s cubic-bezier(0.25, 1, 0.5, 1) 1.4s forwards;
     transform: scaleX(0);
 }

 @keyframes lineGrow {
     0% {
         transform: scaleX(0);
     }

     100% {
         transform: scaleX(1);
     }
 }

 @keyframes taglineWrapperFade {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 .hero__tagline {
     font-family: var(--font-family-accent);
     /* Source Serif 4 */
     font-size: clamp(1.2rem, 3vw, 2rem);
     /* Responsive tagline */
     font-weight: 400;
     /* Regular weight for elegant italic */
     font-variation-settings: 'opsz' 24, 'wght' 400;
     /* Optimize for medium display size */
     margin: 0 var(--spacing-md);
     color: var(--color-white);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     font-style: italic;
     letter-spacing: 0.05em;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     white-space: nowrap;
 }

 /* Hero content entrance animation */
 @keyframes heroContentEntrance {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     40% {
         opacity: 0.6;
         transform: translateX(-10px) scale(0.98) rotateY(-3deg);
         filter: blur(0.5px);
     }

     70% {
         opacity: 0.9;
         transform: translateX(5px) scale(1.01) rotateY(1deg);
         filter: blur(0px);
     }

     100% {
         opacity: 1;
         transform: translateX(0) scale(1) rotateY(0deg);
         filter: blur(0px);
     }
 }

 .hero__description {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-relaxed);
     margin-bottom: var(--spacing-2xl);
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     opacity: 0;
     animation: descriptionFade 2s ease-out 1.2s forwards;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
 }

 /* Description fade-in animation */
 @keyframes descriptionFade {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 0.95;
         transform: translateY(0);
     }
 }

 .hero__actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-md);
     justify-content: center;
     align-items: center;
     animation: actionsRise 2s ease-out 1.6s forwards;
     opacity: 0;
     transform: translateY(30px);
 }

 /* Actions rise-up animation */
 @keyframes actionsRise {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero__cta {
     min-width: 160px;
     transition: all var(--transition-fast);
 }

 .hero__cta:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 .hero__scroll-indicator {
     position: absolute;
     bottom: var(--spacing-2xl);
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--spacing-md);
     color: var(--color-white);
     cursor: pointer;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
     animation: scrollIndicatorFade 1.5s cubic-bezier(0.25, 1, 0.5, 1) 2s forwards;
 }

 /* Modern scroll indicator fade-in animation */
 @keyframes scrollIndicatorFade {
     0% {
         opacity: 0;
         transform: translateX(-50%) translateY(15px);
     }

     100% {
         opacity: 0.9;
         transform: translateX(-50%) translateY(0);
     }
 }

 .hero__scroll-indicator:hover {
     opacity: 1;
     transform: translateX(-50%) translateY(-5px);
 }

 .hero__scroll-text {
     font-family: var(--font-family-primary);
     /* Using the primary font for a modern look */
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     letter-spacing: 0.8px;
     opacity: 0.9;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     position: relative;
     padding-bottom: 5px;
 }

 .hero__scroll-text::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--color-white), transparent);
     opacity: 0.5;
 }

 .hero__scroll-arrow {
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
     transition: all 0.3s ease;
 }

 .hero__scroll-circle {
     opacity: 0.15;
     transition: all 0.3s ease;
 }

 .hero__scroll-arrow-path {
     animation: arrowPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

 .hero__scroll-indicator:hover .hero__scroll-circle {
     opacity: 0.3;
     stroke-width: 2;
 }

 .hero__scroll-indicator:hover .hero__scroll-arrow-path {
     stroke-width: 2;
 }

 @keyframes arrowPulse {

     0%,
     100% {
         opacity: 1;
         transform: translateY(0);
     }

     50% {
         opacity: 0.7;
         transform: translateY(3px);
     }
 }

 /* Mobile optimizations for hero section */
 /* ==========================================================================
Button Components
========================================================================== */

 .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-md) var(--spacing-xl);
     font-family: var(--font-family-primary);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-semibold);
     text-decoration: none;
     border: 2px solid transparent;
     border-radius: var(--border-radius-lg);
     cursor: pointer;
     transition: all var(--transition-fast);
     min-height: 48px;
     position: relative;
     overflow: hidden;
 }

 .button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left var(--transition-normal);
 }

 .button:hover::before {
     left: 100%;
 }

 .button--primary {
     background: var(--color-primary-yellow);
     color: var(--color-text-primary);
     border-color: var(--color-primary-yellow);
 }

 .button--primary:hover,
 .button--primary:focus {
     background: var(--color-orange-accent);
     border-color: var(--color-orange-accent);
     color: var(--color-white);
     text-decoration: none;
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 .button--secondary {
     background: transparent;
     color: var(--color-white);
     border-color: var(--color-white);
 }

 .button--secondary:hover,
 .button--secondary:focus {
     background: var(--color-white);
     color: var(--color-primary-green);
     text-decoration: none;
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 /* ==========================================================================
Newsletter Component
========================================================================== */

 .newsletter {
     background: linear-gradient(135deg, var(--color-primary-green-light) 0%, var(--color-surface) 100%);
     border-radius: var(--border-radius-xl);
     padding: var(--spacing-xl);
     border: 1px solid var(--color-border);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     position: relative;
     overflow: hidden;
 }

 .newsletter::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(var(--color-primary-yellow-rgb), 0.1) 0%, transparent 70%);
     border-radius: 50%;
     z-index: 1;
 }

 .newsletter>* {
     position: relative;
     z-index: 2;
 }

 .newsletter__title {
     font-weight: 700;
     margin-bottom: var(--spacing-md);
     font-size: var(--font-size-lg);
     color: var(--color-text);
     font-family: var(--font-family-secondary);
 }

 .newsletter__description {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     margin-bottom: var(--spacing-lg);
     line-height: 1.6;
 }

 .newsletter__form {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
 }

 .newsletter__input {
     padding: var(--spacing-md) var(--spacing-lg);
     border: 2px solid var(--color-border);
     border-radius: var(--border-radius-lg);
     font-size: var(--font-size-sm);
     background-color: var(--color-white);
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .newsletter__input:focus {
     outline: none;
     border-color: var(--color-primary-yellow);
     box-shadow: 0 0 0 3px rgba(var(--color-primary-yellow-rgb), 0.1);
 }

 .newsletter__button {
     background: linear-gradient(135deg, var(--color-primary-yellow) 0%, var(--color-primary-yellow-dark) 100%);
     color: var(--color-text-primary);
     border: none;
     border-radius: var(--border-radius-lg);
     padding: var(--spacing-md) var(--spacing-lg);
     font-weight: 600;
     font-size: var(--font-size-sm);
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.3s ease;
     box-shadow: 0 2px 8px rgba(var(--color-primary-yellow-rgb), 0.3);
 }

 .newsletter__button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(var(--color-primary-yellow-rgb), 0.4);
 }

 /* Newsletter form inline variant for larger screens */
 @media (min-width: 576px) {
     .newsletter__form--inline {
         flex-direction: row;
     }

     .newsletter__form--inline .newsletter__input {
         flex: 1;
     }

     .newsletter__form--inline .newsletter__button {
         flex-shrink: 0;
         white-space: nowrap;
     }
 }

 /* Newsletter Section Component (Full-width variant) */
 .blog-newsletter {
     background: linear-gradient(135deg,
             var(--color-primary-green-light) 0%,
             var(--color-primary-green) 50%,
             var(--color-primary-green-dark) 100%);
     padding: var(--spacing-xl) 0;
     text-align: center;
     position: relative;
     overflow: hidden;
     margin-bottom: 0;
 }

 .blog-newsletter__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
     position: relative;
     z-index: 2;
 }

 .blog-newsletter__content {
     max-width: 700px;
     margin: 0 auto;
 }

 .blog-newsletter__title {
     font-family: var(--font-family-secondary);
     font-size: clamp(2rem, 5vw, 3rem);
     color: var(--color-white);
     margin-bottom: var(--spacing-md);
     font-weight: 600;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     position: relative;
     line-height: 1.2;
     text-align: center;
 }

 /* Yellow underline decoration for newsletter title */
 .blog-newsletter__title::after {
     content: '';
     position: absolute;
     bottom: -12px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: var(--color-primary-yellow);
     border-radius: 2px;
 }

 .blog-newsletter__description {
     font-size: 1.25rem;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
     margin-bottom: var(--spacing-lg);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .blog-newsletter__form {
     display: flex;
     gap: var(--spacing-lg);
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }

 .blog-newsletter__input-group {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
     max-width: 400px;
     width: 100%;
 }

 @media (min-width: 576px) {
     .blog-newsletter__input-group {
         flex-direction: row;
         max-width: 500px;
     }
 }

 .blog-newsletter__input {
     flex-grow: 1;
     padding: var(--spacing-md) var(--spacing-lg);
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: var(--border-radius-full);
     font-size: var(--font-size-base);
     background: rgba(255, 255, 255, 0.9);
     color: var(--color-text-primary);
     transition: all 0.3s ease;
     outline: none;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .blog-newsletter__input:focus {
     border-color: var(--color-primary-yellow);
     background: var(--color-white);
     box-shadow: 0 0 0 3px rgba(var(--color-primary-yellow-rgb), 0.2);
 }

 .blog-newsletter__input::placeholder {
     color: var(--color-text-secondary);
     opacity: 0.8;
 }

 .blog-newsletter__submit {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 1.25rem 2.5rem;
     border-radius: var(--border-radius-full);
     text-decoration: none;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 2px solid transparent;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     background: var(--color-primary-yellow);
     color: var(--color-text-primary);
     border-color: var(--color-primary-yellow);
     white-space: nowrap;
 }

 /* Shine effect animation for submit button */
 .blog-newsletter__submit::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.6s ease;
     z-index: 0;
 }

 .blog-newsletter__submit:hover::before {
     left: 100%;
 }

 /* Button text positioning above shine effect */
 .blog-newsletter__submit span {
     position: relative;
     z-index: 1;
 }

 .blog-newsletter__submit:hover {
     background: var(--color-white);
     color: var(--color-primary-green-dark);
     border-color: var(--color-white);
     transform: translateY(-4px);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 }

 .blog-newsletter__submit:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(var(--color-primary-yellow-rgb), 0.4);
 }

 .blog-newsletter__privacy {
     text-align: center;
     margin-top: var(--spacing-md);
 }

 .blog-newsletter__checkbox-label {
     display: flex;
     align-items: flex-start;
     justify-content: center;
     gap: var(--spacing-sm);
     font-size: var(--font-size-sm);
     color: rgba(255, 255, 255, 0.9);
     cursor: pointer;
     line-height: 1.6;
     max-width: 400px;
     margin: 0 auto;
     font-weight: 400;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .blog-newsletter__checkbox {
     margin-top: 2px;
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     accent-color: var(--color-primary-yellow);
 }

 .blog-newsletter__checkbox-text {
     text-align: left;
 }

 .blog-newsletter__link {
     color: var(--color-primary-yellow);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 2px;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .blog-newsletter__link:hover {
     color: var(--color-white);
     text-decoration-thickness: 2px;
 }

 /* Blog Newsletter Responsive Improvements */
 @media (max-width: 576px) {
     .blog-newsletter {
         padding: var(--spacing-xl) 0;
     }

     .blog-newsletter__container {
         padding: 0 var(--spacing-md);
     }

     .blog-newsletter__title {
         font-size: clamp(1.25rem, 5vw, 1.75rem);
         margin-bottom: var(--spacing-md);
     }

     .blog-newsletter__description {
         font-size: var(--font-size-sm);
         margin-bottom: var(--spacing-xl);
     }

     .blog-newsletter__input-group {
         gap: var(--spacing-sm);
     }

     .blog-newsletter__input,
     .blog-newsletter__submit {
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: var(--font-size-sm);
     }

     .blog-newsletter__checkbox-label {
         font-size: calc(var(--font-size-sm) - 1px);
         gap: var(--spacing-xs);
     }
 }

 /* ==========================================================================
Featured Section
========================================================================== */

 .featured {
     padding: var(--spacing-2xl) 0 var(--spacing-2xl);
     /* Reduced padding */
     background: var(--color-white);
     /* Clean white background like med.kitchen */
     position: relative;
     overflow: visible;
     /* Allow content to overflow for negative margins if needed */
     margin: var(--spacing-xl) 0;
     /* Reduced margins */
 }

 /* Remove background pattern for cleaner look */
 .featured::before {
     content: none;
 }

 .featured__container {
     max-width: 1400px;
     /* Wider container like med.kitchen */
     margin: 0 auto;
     padding: 0 var(--spacing-2xl);
     /* More horizontal padding */
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     /* Ensure all children are left-aligned */
 }

 .featured__header {
     text-align: center;
     /* Changed to center for consistency with other sections */
     margin-bottom: var(--spacing-md);
     position: relative;
     padding: var(--spacing-sm) 0 var(--spacing-xs);
     display: flex;
     flex-direction: column;
     align-items: center;
     /* Center aligned for consistency */
     gap: var(--spacing-xs);
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     /* Center the header */
     margin-right: 0;
     padding-left: 0;
     /* Let the container handle padding */
 }

 /* Remove decorative underline */
 .featured__header::after {
     content: none;
 }

 .featured__category {
     display: inline-block;
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-semibold);
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--color-primary-green);
     background: rgba(45, 90, 39, 0.1);
     /* Subtle green background */
     padding: var(--spacing-xs) var(--spacing-md);
     border-radius: var(--border-radius-full);
     margin-bottom: var(--spacing-xs);
     /* Reduced spacing between category and title */
     box-shadow: none;
     transform: none;
     transition: all 0.3s ease;
     position: relative;
     align-self: flex-start;
     /* Ensure left alignment */
 }

 /* Add subtle hover effects */
 .featured__category:hover {
     background: rgba(45, 90, 39, 0.15);
     transform: translateY(-1px);
     box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
 }

 /* Remove separator dot */
 .featured__category::after {
     content: none;
 }

 .featured__title {
     /* Most styles now come from .section-heading */
     align-self: center;
     /* Center for consistency */
 }

 /* The underline animation is now handled by .section-heading::after */
 .featured__title::after {
     /* Override with empty to avoid duplicate underlines */
     content: none;
 }

 /* Kept for backward compatibility */
 @keyframes underlineAnimate {
     to {
         width: 100%;
     }
 }

 .featured__grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
     /* Reduced spacing for mobile view as well */
     margin-top: 0;
     /* Remove top margin */
     opacity: 0;
     transform: translateY(20px);
     animation: featuredGridReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
     /* Delayed start */
 }

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

 /* Mobile responsive styles for featured section */
 @media (max-width: 768px) {
     .featured__category {
         font-size: var(--font-size-xs);
         letter-spacing: 1px;
         padding: var(--spacing-2xs) var(--spacing-sm);
         margin-bottom: var(--spacing-2xs);
     }
 }

 @media (max-width: 480px) {
     .featured__category {
         font-size: var(--font-size-xs);
         letter-spacing: 0.5px;
         padding: var(--spacing-2xs) var(--spacing-xs);
         margin-bottom: var(--spacing-xs);
     }
 }

 @media (min-width: 768px) {
     .featured__grid {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: auto auto;
         gap: var(--spacing-xl);
         /* Horizontal gap */
         row-gap: var(--spacing-lg);
         /* Reduced vertical gap between rows */
     }

     /* Two cards on top row for tablet */
     .card:nth-child(1) {
         grid-column: 1;
         grid-row: 1;
     }

     .card:nth-child(2) {
         grid-column: 2;
         grid-row: 1;
     }
 }

 @media (min-width: 1024px) {
     .featured__grid {
         grid-template-columns: repeat(3, 1fr);
         /* Three equal columns like med.kitchen */
         grid-template-rows: auto auto;
         grid-auto-flow: row;
         gap: var(--spacing-xl);
         /* Horizontal gap */
         row-gap: var(--spacing-lg);
         /* Reduced vertical gap between rows */
     }

     /* Position all cards with two on top, three on bottom */
     .card:nth-child(1) {
         grid-column: 1 / span 2;
         /* First card spans 2 columns instead of all 3 */
         grid-row: 1;
     }

     .card:nth-child(2) {
         grid-column: 3;
         grid-row: 1;
     }

     .card:nth-child(3) {
         grid-column: 1;
         grid-row: 2;
     }

     .card:nth-child(4) {
         grid-column: 2;
         grid-row: 2;
     }

     .card:nth-child(5) {
         grid-column: 3;
         grid-row: 2;
     }
 }

 /* Add staggered reveal animations to cards */
 .card:nth-child(1) {
     animation-delay: 0.2s;
 }

 .card:nth-child(2) {
     animation-delay: 0.35s;
 }

 .card:nth-child(3) {
     animation-delay: 0.5s;
 }

 .card:nth-child(4) {
     animation-delay: 0.65s;
 }

 .card:nth-child(5) {
     animation-delay: 0.8s;
 }

 /* ==========================================================================
Categories Section
========================================================================== */

 .categories {
     padding: var(--spacing-lg) 0 var(--spacing-xl);
     background-color: rgba(var(--color-neutral-bg-rgb), 0.7);
     position: relative;
     overflow: hidden;
 }

 .categories__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--spacing-md);
 }

 @media (min-width: 768px) {
     .categories {
         padding: var(--spacing-xl) 0 var(--spacing-2xl);
     }

     .categories__container {
         padding: 0 var(--spacing-xl);
     }
 }

 .categories::before {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(var(--color-primary-green-rgb), 0.1) 0%, rgba(var(--color-primary-green-rgb), 0) 70%);
     top: -150px;
     left: -150px;
     z-index: 1;
 }

 .categories::after {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(var(--color-primary-yellow-rgb), 0.08) 0%, rgba(var(--color-primary-yellow-rgb), 0) 70%);
     bottom: -200px;
     right: -200px;
     z-index: 1;
 }

 .categories__container {
     position: relative;
     z-index: 2;
 }

 .categories__header {
     text-align: center;
     margin-bottom: var(--spacing-md);
     position: relative;
 }

 @media (min-width: 768px) {
     .categories__header {
         margin-bottom: var(--spacing-lg);
     }
 }

 @media (min-width: 1024px) {
     .categories__header {
         margin-bottom: var(--spacing-xl);
     }
 }

 .categories__title {
     /* Most styles now come from .section-heading */
     color: var(--color-text-primary);
 }

 .categories__title::after {
     /* Override with empty to avoid duplicate underlines */
     content: none;
 }

 .categories__description {
     font-size: var(--font-size-md);
     color: var(--color-text-secondary);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.5;
 }

 @media (min-width: 768px) {
     .categories__description {
         font-size: var(--font-size-lg);
         line-height: 1.6;
     }
 }

 @media (min-width: 1024px) {
     .categories__description {
         font-size: var(--font-size-xl);
     }
 }

 .categories__grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-md);
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 var(--spacing-md);
 }

 @media (min-width: 768px) {
     .categories__grid {
         grid-template-columns: repeat(2, 1fr);
         gap: var(--spacing-lg);
     }
 }

 @media (min-width: 1024px) {
     .categories__grid {
         grid-template-columns: repeat(4, 1fr);
         max-width: 1200px;
         gap: var(--spacing-md);
         padding: 0;
     }
 }

 /* ==========================================================================
Responsive Design
========================================================================== */

 @media (min-width: 768px) {
     .header__container {
         padding: 0 var(--spacing-lg);
     }

     .hero__content {
         padding: 0 var(--spacing-lg);
     }

     .featured__container {
         padding: 0 var(--spacing-lg);
     }
 }

 @media (min-width: 1024px) {
     .header__container {
         padding: 0 var(--spacing-xl);
     }

     .hero__content {
         padding: 0 var(--spacing-xl);
     }

     .featured__container {
         padding: 0 var(--spacing-xl);
     }
 }









 /* ==========================================================================
   GOZOFOOD.COM - COMPLETE UI COMPONENTS LIBRARY
   ==========================================================================
   
   Description: Complete collection of reusable UI components for the website
   Methodology: BEM (Block Element Modifier) naming conventions
   
   *** COMPONENT INDEX ***
   
   1. BACK TO TOP BUTTON
      - Fixed floating button for easy page navigation
      - Smooth animations and hover effects
      - Responsive design for mobile/desktop
   
   2. SECTION HEADINGS
      - Main heading styles with animated underlines
      - Light/dark theme variants
      - Responsive typography scaling
   
   3. MODERN CATEGORY CARDS
      - Interactive grid cards with 3D effects
      - Animated icons and gradient overlays
      - Hover transformations and transitions
   
   4. ARTICLE CARDS
      - Content cards for featured articles
      - Image overlays and category badges
      - Multiple size variants (standard/larger)
   
   5. BADGE COMPONENTS
      - Category labels and tags
      - Color-coded by content type
      - Multiple styling variants
   
   6. FOOTER COMPONENT
      - Site footer with navigation links
      - Newsletter signup and social media
      - Multi-column responsive layout
   
   Each component is designed to be:
   - Reusable across different contexts
   - Responsive and accessible
   - Consistent with the overall design system
   - Easy to maintain and extend
   - Fully commented for easy understanding
   
   Author: Gozofood.com Development Team
   Version: 2.0 - Complete Components Library (merged ui-components.css)
   Last Updated: September 2025
   ========================================================================== */

 /* ==========================================================================
   1. BACK TO TOP BUTTON COMPONENT
   ==========================================================================
   
   PURPOSE: Fixed floating button that appears when user scrolls down
   
   FEATURES:
   - Smooth fade-in/out animations
   - Hover effects with scaling and color changes
   - Responsive sizing for mobile devices
   - Fixed positioning in bottom-right corner
   - Accessible with proper ARIA labels
   
   USAGE: Add .back-to-top--visible class to show the button
   
   BEM STRUCTURE:
   - .back-to-top (Block)
   - .back-to-top--visible (Modifier - when button should be visible)
   ========================================================================== */

 .back-to-top {
     /* Fixed positioning in bottom-right corner */
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;

     /* Visual styling */
     background: var(--color-primary-yellow);
     color: var(--color-text-primary);
     border: none;
     border-radius: 50%;
     /* Perfect circle */
     cursor: pointer;
     box-shadow: var(--shadow-lg);
     z-index: var(--z-index-fixed);

     /* Initially hidden state */
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     /* Slide up animation */

     /* Flexbox for centering the arrow icon */
     display: flex;
     align-items: center;
     justify-content: center;

     /* Smooth transitions for all properties */
     transition: all var(--transition-normal);
 }

 /* Hover state with color change and scaling */
 .back-to-top:hover {
     background: var(--color-orange-accent);
     color: var(--color-white);
     transform: translateY(15px) scale(1.05);
     /* Slight lift and scale */
     box-shadow: var(--shadow-xl);
 }

 /* Active/click state for tactile feedback */
 .back-to-top:active {
     transform: translateY(17px) scale(0.98);
     /* Slight press effect */
 }

 /* Visible state - activated by JavaScript when user scrolls */
 .back-to-top--visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     /* Reset to normal position */
 }

 /* Icon styling within the button */
 .back-to-top svg {
     width: 24px;
     height: 24px;
     transition: transform var(--transition-fast);
 }

 /* Icon animation on hover */
 .back-to-top:hover svg {
     transform: translateY(-2px);
     /* Icon lifts slightly on hover */
 }

 /* Mobile responsive adjustments */
 @media (max-width: 768px) {
     .back-to-top {
         bottom: 20px;
         /* Closer to edge on mobile */
         right: 20px;
         width: 45px;
         /* Smaller size for mobile */
         height: 45px;
     }

     .back-to-top svg {
         width: 20px;
         /* Smaller icon for mobile */
         height: 20px;
     }
 }

 /* ==========================================================================
   2. SECTION HEADINGS COMPONENT
   ==========================================================================
   
   PURPOSE: Consistent heading styles across all sections of the website
   
   FEATURES:
   - Animated yellow underline that grows on page load
   - Hover effect that changes underline color to green
   - Light variant for use on dark backgrounds
   - Responsive font sizing
   - Label and subtitle sub-components
   
   USAGE: Apply .section-heading class to h1, h2, h3 elements
   
   BEM STRUCTURE:
   - .section-heading (Block)
   - .section-heading--light (Modifier - for dark backgrounds)
   - .section-heading__label (Element - small category label)
   - .section-heading__title (Element - main heading text)
   - .section-heading__subtitle (Element - descriptive text below)
   ========================================================================== */

 .section-heading {
     /* Typography */
     font-size: var(--font-size-5xl);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.1;

     /* Layout */
     margin: 0 0 var(--spacing-md) 0;
     padding: 0 0 var(--spacing-2xs) 0;

     /* Positioning for underline effect */
     position: relative;
     display: inline-block;

     /* Inheritance and sizing */
     color: inherit;
     align-self: flex-start;
     width: auto;
 }

 /* Animated underline effect using ::after pseudo-element */
 .section-heading::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     /* Starts at 0 width */
     height: 3px;
     background: var(--color-primary-yellow);

     /* Smooth animation timing */
     transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;

     /* Delay animation until after page load */
     animation: headingUnderlineAnimate 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
 }

 /* Underline color change on hover */
 .section-heading:hover::after {
     background: var(--color-primary-green);
 }

 /* Keyframe animation for underline growth */
 @keyframes headingUnderlineAnimate {
     to {
         width: 100%;
         /* Grows to full width */
     }
 }

 /* Light variant for dark backgrounds */
 .section-heading--light {
     color: var(--color-white);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     /* Slight shadow for readability */
 }

 /* Label component - small category indicator above heading */
 .section-heading__label {
     display: inline-block;
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-semibold);
     color: var(--color-primary-green);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: var(--spacing-sm);
     padding: var(--spacing-xs) var(--spacing-md);
     background: rgba(var(--color-primary-green), 0.1);
     /* Subtle background tint */
     border-radius: var(--border-radius-full);
     /* Pill shape */
 }

 /* Main title component */
 .section-heading__title {
     font-family: var(--font-family-secondary);
     font-size: var(--font-size-4xl);
     font-weight: var(--font-weight-bold);
     color: var(--color-text-primary);
     line-height: var(--line-height-tight);
     margin: 0;
 }

 /* Subtitle component - descriptive text below main heading */
 .section-heading__subtitle {
     font-size: var(--font-size-lg);
     color: var(--color-text-secondary);
     line-height: var(--line-height-relaxed);
     margin: var(--spacing-md) auto 0;
     max-width: 600px;
     /* Constrain width for readability */
 }

 /* Mobile responsive adjustments */
 @media (max-width: 768px) {
     .section-heading {
         font-size: var(--font-size-xl);
         /* Smaller on tablets */
         letter-spacing: 0.3px;
         /* Reduce letter spacing */
         line-height: 1.25;
         /* Better line height for multi-line */
         text-align: center;
         /* Ensure centering */
         width: 100%;
         /* Full width for better centering */
         margin-bottom: var(--spacing-md);
         word-wrap: break-word;
         /* Allow words to break if needed */
         hyphens: auto;
         /* Enable hyphenation */
     }

     .section-heading__title {
         font-size: var(--font-size-xl);
         line-height: 1.25;
     }

     .section-heading__subtitle {
         font-size: var(--font-size-base);
     }
 }

 /* Very small mobile devices */
 @media (max-width: 480px) {
     .section-heading {
         font-size: var(--font-size-base);
         /* Much smaller - 16px on mobile */
         letter-spacing: 0.1px;
         /* Minimal letter spacing */
         line-height: 1.3;
         /* Optimal for readability */
         margin-bottom: var(--spacing-sm);
         /* Reduce bottom margin */
         padding-bottom: var(--spacing-xs);
         /* Reduce padding */
         text-align: center;
         /* Ensure centering */
         width: 100%;
         /* Full width */
         max-width: 100%;
         /* Prevent overflow */
         word-wrap: break-word;
         /* Break long words */
         overflow-wrap: break-word;
         /* Alternative for better support */
         hyphens: auto;
         /* Enable hyphenation */
         white-space: normal;
         /* Allow normal wrapping */
     }

     .section-heading::after {
         height: 2px;
         /* Thinner underline */
         width: 50px;
         /* Shorter underline on mobile */
         left: 50%;
         /* Center the underline */
         transform: translateX(-50%);
         /* Perfect centering */
     }

     .section-heading__title {
         font-size: var(--font-size-base);
         line-height: 1.3;
         text-align: center;
         width: 100%;
     }

     .section-heading__subtitle {
         font-size: var(--font-size-sm);
         margin-top: var(--spacing-sm);
         /* Reduce spacing */
     }

     .section-heading__label {
         font-size: var(--font-size-xs);
         padding: var(--spacing-2xs) var(--spacing-sm);
         margin-bottom: var(--spacing-xs);
     }
 }

 /* Extra small screens - for very narrow devices */
 @media (max-width: 360px) {
     .section-heading {
         font-size: var(--font-size-sm);
         /* Even smaller - 14px for very small screens */
         letter-spacing: 0.05px;
         line-height: 1.4;
         /* More space between lines */
         padding: 0 var(--spacing-xs);
         /* Add horizontal padding */
     }

     .section-heading::after {
         width: 35px;
         /* Very short underline */
     }
 }

 /* Ultra-narrow screens - for the smallest devices */
 @media (max-width: 320px) {
     .section-heading {
         font-size: var(--font-size-xs);
         /* Ultra small - 12px for tiny screens */
         letter-spacing: 0;
         line-height: 1.5;
         padding: 0 var(--spacing-2xs);
         word-spacing: -1px;
         /* Tighten word spacing */
     }

     .section-heading::after {
         width: 30px;
         /* Minimal underline */
     }
 }

 /* ==========================================================================
   3. MODERN CATEGORY CARDS COMPONENT
   ==========================================================================
   
   PURPOSE: Interactive cards for displaying content categories
   
   FEATURES:
   - 3D-style animated icons with morphing shapes
   - Gradient background overlays on hover
   - Card lifting animation with enhanced shadows
   - Gradient text effects on title hover
   - Animated arrow in call-to-action links
   - Fully responsive grid layout
   
   USAGE: Create cards with .category-card--modern class
   
   BEM STRUCTURE:
   - .categories-modern (Block - container section)
   - .categories-modern__container (Element - content wrapper)
   - .categories-modern__grid (Element - grid layout)
   - .category-card--modern (Block - individual card)
   - .category-card--modern__content (Element - card content wrapper)
   - .category-card--modern__icon (Element - icon container)
   - .category-card--modern__title (Element - card title)
   - .category-card--modern__description (Element - card description)
   - .category-card--modern__link (Element - action link)
   - .category-card--modern__overlay (Element - hover overlay)
   ========================================================================== */

 /* Container section for category cards */
 .categories-modern {
     padding: var(--spacing-5xl) 0;
     background: var(--color-background-secondary);
 }

 /* Content wrapper with max-width constraint */
 .categories-modern__container {
     max-width: var(--container-xl);
     margin: 0 auto;
     padding: 0 var(--spacing-lg);
 }

 /* Responsive grid layout for cards */
 .categories-modern__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     /* Auto-responsive columns */
     gap: var(--spacing-2xl);
     margin-top: var(--spacing-3xl);
 }

 /* Individual category card */
 .category-card--modern {
     /* Layout and structure */
     background: var(--color-white);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
     text-align: center;
     min-height: 300px;

     /* Visual effects */
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
     z-index: 1;

     /* Flexbox for content alignment */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;

     /* Smooth hover transitions */
     transition: all 0.35s ease;
 }

 /* Gradient background overlay (hidden by default) */
 .category-card--modern::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--color-primary-green), var(--color-primary-yellow));
     opacity: 0;
     z-index: -1;
     transform: translateY(100%);
     /* Slides in from bottom */
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     /* Smooth easing */
 }

 /* Card hover state - lifts up with enhanced shadow */
 .category-card--modern:hover {
     transform: translateY(-10px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
 }

 /* Reveal gradient overlay on hover */
 .category-card--modern:hover::before {
     opacity: 0.05;
     /* Subtle overlay */
     transform: translateY(0);
     /* Slide in completely */
 }

 /* Content wrapper within card */
 .category-card--modern__content {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: 100%;
     z-index: 2;
     /* Above overlay */
     position: relative;
 }

 /* Animated icon container with 3D morphing effect */
 .category-card--modern__icon {
     width: 70px;
     height: 70px;
     margin-bottom: var(--spacing-md);
     margin-top: var(--spacing-sm);

     /* Gradient background */
     background: linear-gradient(135deg, var(--color-primary-green), var(--color-secondary-green));

     /* Morphing border radius - creates organic shape */
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);

     /* Flexbox for centering icon */
     display: flex;
     align-items: center;
     justify-content: center;

     /* Smooth transition for hover effects */
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 }

 /* Icon hover state - scales, rotates, and morphs shape */
 .category-card--modern:hover .category-card--modern__icon {
     transform: scale(1.15) rotate(10deg);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     /* Different morphed shape */
 }

 /* SVG icon styling */
 .category-card--modern__icon svg {
     width: 32px;
     height: 32px;
     color: white;
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
     /* Subtle shadow */
 }

 /* Card title with gradient text effect on hover */
 .category-card--modern__title {
     font-size: var(--font-size-lg);
     margin-bottom: var(--spacing-sm);
     font-weight: var(--font-weight-bold);
     color: var(--color-text-primary);
     transition: all 0.3s ease;
 }

 /* Gradient text effect on card hover */
 .category-card--modern:hover .category-card--modern__title {
     background: linear-gradient(135deg, var(--color-primary-green), var(--color-primary-yellow));
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     /* Hide original text color */
     transform: scale(1.05);
     /* Slight scaling */
 }

 /* Card description text */
 .category-card--modern__description {
     margin-bottom: var(--spacing-md);
     font-size: var(--font-size-sm);
     line-height: 1.4;
     max-width: 95%;
     color: var(--color-text-secondary);
     flex-grow: 1;
     /* Pushes link to bottom */
 }

 /* Call-to-action link with animated arrow */
 .category-card--modern__link {
     display: inline-flex;
     align-items: center;
     font-weight: var(--font-weight-semibold);
     color: var(--color-primary-green);
     text-decoration: none;

     /* Button-like styling */
     padding: var(--spacing-xs) var(--spacing-md);
     border: 1px solid currentColor;
     border-radius: 20px;
     /* Pill shape */

     /* Layout */
     font-size: var(--font-size-sm);
     margin-top: auto;
     /* Pushes to bottom of card */
     margin-bottom: var(--spacing-md);

     /* Smooth transitions */
     transition: all 0.3s ease;
     position: relative;
 }

 /* Animated arrow after link text */
 .category-card--modern__link::after {
     content: '→';
     /* Right arrow character */
     margin-left: 6px;
     transition: transform 0.3s ease;
 }

 /* Link hover state - fills with green, white text */
 .category-card--modern__link:hover {
     background-color: var(--color-primary-green);
     color: var(--color-white);
     border-color: var(--color-primary-green);
     text-decoration: none;
 }

 /* Arrow slides right on hover */
 .category-card--modern__link:hover::after {
     transform: translateX(4px);
 }

 /* Optional overlay element for advanced hover effects */
 .category-card--modern__overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, var(--color-primary-green) 0%, var(--color-secondary-green) 100%);
     opacity: 0;
     /* Hidden by default */
     transition: opacity var(--transition-normal);

     /* Center overlay content */
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-white);
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
 }

 /* Show overlay on card hover */
 .category-card--modern:hover .category-card--modern__overlay {
     opacity: 0.9;
 }

 /* Mobile responsive adjustments */
 @media (max-width: 768px) {

     /* Single column layout on mobile */
     .categories-modern__grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-lg);
     }

     /* Smaller cards on mobile */
     .category-card--modern {
         height: 250px;
         padding: var(--spacing-md);
         min-height: auto;
         gap: var(--spacing-xs);
     }

     /* Smaller icon on mobile */
     .category-card--modern__icon {
         width: 50px;
         height: 50px;
         margin-bottom: var(--spacing-sm);
         margin-top: 0;
     }

     .category-card--modern__icon svg {
         width: 24px;
         height: 24px;
     }

     /* Adjusted typography for mobile */
     .category-card--modern__title {
         font-size: var(--font-size-md);
         margin-bottom: var(--spacing-xs);
     }

     .category-card--modern__description {
         margin-bottom: var(--spacing-sm);
         font-size: var(--font-size-xs);
         line-height: 1.3;
     }

     .category-card--modern__link {
         padding: var(--spacing-xs) var(--spacing-sm);
         font-size: var(--font-size-xs);
         margin-top: var(--spacing-sm);
         margin-bottom: var(--spacing-xs);
     }
 }

 /* ==========================================================================
   4. ARTICLE CARDS COMPONENT
   ==========================================================================
   
   PURPOSE: Content cards for displaying featured articles, recipes, and blog posts
   
   FEATURES:
   - Responsive image containers with aspect ratio preservation
   - Category badge overlays positioned on images
   - Hover effects with image scaling and badge movement
   - Title overlays with accessible link structure
   - Content areas with excerpts and read-more links
   - Multiple size variants (standard and larger featured cards)
   
   USAGE: Create article cards using .card class with optional .card--larger modifier
   
   BEM STRUCTURE:
   - .card (Block)
   - .card--larger (Modifier - for featured/larger cards)
   - .card__image-container (Element - image wrapper)
   - .card__image (Element - main card image)
   - .card__category-badge (Element - badge overlay)
   - .card__title-overlay (Element - title overlay)
   - .card__title (Element - card title)
   - .card__link (Element - title link)
   - .card__content (Element - content wrapper)
   - .card__excerpt (Element - article excerpt)
   - .card__read-more (Element - read more link)
   ========================================================================== */

 .card {
     /* Base card styling */
     background: var(--color-white);
     border-radius: 0;
     /* Squared corners for modern look */
     overflow: hidden;
     /* Clip content to card boundaries */
     box-shadow: none;
     /* Clean design without shadows */
     height: 100%;
     /* Equal height in grid layouts */

     /* Layout structure */
     display: flex;
     flex-direction: column;
     position: relative;

     /* Initial state for reveal animation */
     opacity: 0;
     transform: translateY(20px);

     /* Hover border setup */
     border-bottom: 2px solid transparent;
     /* Hidden border that appears on hover */

     /* Smooth transitions */
     transition: all 0.3s ease;

     /* Reveal animation with delay */
     animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
 }

 /* Card reveal animation - slides up and fades in */
 @keyframes cardReveal {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Card hover state - subtle lift with green border */
 .card:hover {
     transform: translateY(-6px);
     /* Gentle lift effect */
     box-shadow: none;
     /* Maintain clean look */
     border-bottom: 2px solid var(--color-primary-green);
     /* Green accent border */
 }

 /* Image container - maintains aspect ratio and prevents overflow */
 .card__image-container {
     position: relative;
     width: 100%;
     height: 300px;
     /* Standard card image height */
     overflow: hidden;
     /* Clip scaled images */
     clip-path: none;
     /* Clean rectangular edges */
 }

 /* Larger featured cards have taller image areas */
 .card--larger .card__image-container {
     height: 400px;
     /* Taller image for prominence */
 }

 /* Remove general overlay - we use specific title overlay instead */
 .card__image-container::before {
     content: none;
 }

 /* Add category badge directly over image */
 .card__category-badge {
     position: absolute;
     top: var(--spacing-md);
     left: var(--spacing-md);
     z-index: 2;
     /* Removed background and other styling that was duplicating badge styles */
 }

 /* Card image styling */
 .card__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Maintains aspect ratio while filling container */
     object-position: center;
     /* Centers image within container */
     transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), filter 0.4s ease;
     will-change: transform;
     /* Performance hint for smoother animations */
     filter: saturate(1.05);
     /* Slightly enhance colors */
 }

 /* Enhanced image zoom effect on card hover */
 .card:hover .card__image {
     transform: scale(1.08);
     /* Enhanced zoom effect */
     filter: saturate(1.15) brightness(1.05);
     /* Boost colors on hover */
 }

 /* Category badge overlay on image */
 .card__category-badge {
     position: absolute;
     top: var(--spacing-md);
     /* 16px from top */
     left: var(--spacing-md);
     /* 16px from left */
     z-index: 2;
     /* Above image */
     transition: transform 0.3s ease;
     background: transparent !important;
     /* Ensure no background */
     padding: 0;
     /* Remove any padding */
 }

 .card:hover .card__category-badge {
     transform: translateY(-3px);
 }

 /* Card content area */
 .card__content {
     padding: 0;
     /* No padding needed since excerpt has its own padding */
     flex: 1;
     /* Grows to fill available space */
     display: flex;
     flex-direction: column;
     position: relative;
     transition: all 0.3s ease;
     background: transparent;
 }

 /* Larger card content needs no special padding */
 .card--larger .card__content {
     padding: 0;
 }

 /* Position the card content relative to accommodate the absolute positioning of the title */
 .card {
     position: relative;
 }

 /* Card title styling - normal positioning since we'll move it to the image with JavaScript */
 .card__title {
     margin: 0 0 var(--spacing-md) 0;
     font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-bold);
     line-height: 1.2;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* Larger card title should be even larger */
 .card--larger .card__title {
     font-size: var(--font-size-3xl);
 }

 /* Create a new overlay element for the title */
 .card__title-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: var(--spacing-lg);
     z-index: 3;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
 }

 .card--larger .card__title-overlay {
     padding: var(--spacing-xl);
 }

 /* Card title link - inherits title styling */
 .card__link {
     color: var(--color-white);
     /* White text for readability against dark overlay */
     text-decoration: none;
     transition: all 0.3s ease;
     background: none;
     /* Remove underline animation */
     padding-bottom: 0;
     display: block;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
     /* Enhanced text shadow for better readability */
 }

 .card__link:hover,
 .card__link:focus {
     color: var(--color-primary-yellow);
     /* Change hover color for contrast */
     text-decoration: none;
 }

 /* Card excerpt/description text */
 .card__excerpt {
     margin: 0;
     color: var(--color-text-secondary);
     line-height: var(--line-height-relaxed);
     flex: 1;
     /* Takes remaining space */
     font-size: var(--font-size-base);
     font-family: var(--font-family-serif);
     /* Use serif font for excerpt like med.kitchen */
     padding: var(--spacing-xl) var(--spacing-lg);
     /* Increase padding now that title is in overlay */
 }

 .card__excerpt p {
     margin: 0 0 var(--spacing-md) 0;
 }

 /* Add more padding to larger card excerpt */
 .card--larger .card__excerpt {
     padding: var(--spacing-2xl) var(--spacing-xl);
     font-size: var(--font-size-lg);
     /* Larger text in larger card */
 }

 /* Card metadata container - Hidden by default as requested */
 .card__meta {
     display: none;
     /* Hide metadata as requested */
 }

 /* Card author styling - Hidden by default */
 .card__author {
     font-weight: var(--font-weight-medium);
     display: none;
 }

 /* Card date styling */
 .card__date {
     color: var(--color-text-secondary);
 }

 /* Larger card modifier - spans 2 columns */
 .card--larger {
     transform: translateY(0);
     box-shadow: none;
     /* Remove shadow for consistency */
     border-left: none;
     /* Remove left border for cleaner look */
 }

 .card--featured:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.06);
 }

 .card--featured .card__image-container {
     height: 320px;
     /* Slightly reduced height for better proportion */
     clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%);
     /* Less pronounced angle */
 }

 .card--featured .card__title {
     font-size: var(--font-size-xl);
     /* Same size as other cards for consistency */
     margin-bottom: var(--spacing-md);
 }

 .card .card__image-container {
     height: 280px;
     /* Increased height for regular cards */
 }

 /* Responsive adjustments for card images */
 @media (min-width: 768px) and (max-width: 1023px) {
     .card--featured .card__image-container {
         height: 340px;
     }
 }

 /* ==========================================================================
   5. BADGE COMPONENTS
   ==========================================================================
   
   PURPOSE: Small category labels for content organization and visual hierarchy
   
   FEATURES:
   - Color-coded system for different content types
   - Square corners for modern aesthetic
   - Left border accent for visual depth
   - Hover animations that respond to parent card hover
   - Consistent typography and spacing
   
   USAGE: Apply .badge class with color modifier (e.g., .badge--recipes)
   
   COLOR SYSTEM:
   - .badge--recipes (Green) - For cooking and food preparation content
   - .badge--culture (Blue) - For cultural and traditional food stories
   - .badge--travel (Orange) - For destination and travel-related content
   - .badge--restaurants (Purple) - For dining and restaurant features
   - .badge--trends (Yellow) - For food trends and innovations
   
   BEM STRUCTURE:
   - .badge (Block)
   - .badge--recipes, .badge--culture, etc. (Modifiers for different categories)
   ========================================================================== */

 .badge {
     /* Typography and text styling */
     display: inline-block;
     font-size: var(--font-size-xs);
     /* 12px - small but readable */
     font-weight: var(--font-weight-semibold);
     /* 600 weight for emphasis */
     text-transform: uppercase;
     /* All caps for label consistency */
     letter-spacing: 1px;
     /* Slight letter spacing for readability */
     color: var(--color-white);
     /* White text on colored backgrounds */

     /* Layout and spacing */
     padding: var(--spacing-xs) var(--spacing-md);
     /* 4px vertical, 16px horizontal */
     border-radius: 0;
     /* Square corners for modern look */

     /* Visual effects */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     /* Subtle depth shadow */

     /* Smooth transitions for hover effects */
     transition: all var(--transition-fast);
 }

 /* Badge hover animation - triggered by parent card hover */
 .card:hover .badge {
     transform: translateY(-1px);
     /* Slight lift on hover */
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
     /* Enhanced shadow */
 }

 /* RECIPE BADGE - Green theme for cooking content */
 .badge--recipes {
     background: var(--color-primary-green);
     color: var(--color-white);
     border-left: 3px solid var(--color-secondary-green);
     /* Accent border */
 }

 /* CULTURE BADGE - Blue theme for cultural content */
 .badge--culture {
     background: #3B82F6;
     /* Modern blue */
     color: var(--color-white);
     border-left: 3px solid #1D4ED8;
     /* Darker blue accent */
 }

 /* TRAVEL BADGE - Orange theme for destination content */
 .badge--travel {
     background: #F97316;
     /* Vibrant orange */
     color: var(--color-white);
     border-left: 3px solid #C2410C;
     /* Darker orange accent */
 }

 /* Restaurant badge - purple theme */
 .badge--restaurants {
     background: #8B5CF6;
     /* Purple */
     color: var(--color-white);
     border-left: 3px solid #6D28D9;
     /* Darker purple for accent */
 }

 /* Trends badge - red theme */
 .badge--trends {
     background: #EF4444;
     /* Red */
     color: var(--color-white);
     border-left: 3px solid #B91C1C;
     /* Darker red for accent */
 }

 /* ==========================================================================
   6. FOOTER COMPONENT
   ==========================================================================
   
   PURPOSE: Complete site footer with navigation, branding, and information
   
   FEATURES:
   - Multi-column responsive layout that stacks on mobile
   - Brand section with animated logo and description
   - Newsletter signup form with input styling
   - Organized navigation link groups
   - Social media integration
   - Copyright and credits section
   - Dark theme with contrast-optimized text
   - Decorative elements and background textures
   
   USAGE: Site-wide footer component containing all supplementary content
   
   LAYOUT SECTIONS:
   1. Brand area (logo, description, newsletter)
   2. Navigation columns (organized by topic)
   3. Social media links
   4. Bottom bar (copyright, credits)
   
   BEM STRUCTURE:
   - .footer (Block)
   - .footer__container (Element - content wrapper)
   - .footer__content (Element - main content grid)
   - .footer__brand (Element - branding section)
   - .footer__logo (Element - logo link)
   - .footer__logo-image (Element - logo image)
   - .footer__logo-text (Element - logo text)
   - .footer__description (Element - brand description)
   - .footer__newsletter (Element - newsletter section)
   - .footer__newsletter-form (Element - signup form)
   - .footer__newsletter-input (Element - email input)
   - .footer__newsletter-button (Element - submit button)
   - .footer__links (Element - navigation wrapper)
   - .footer__column (Element - link column)
   - .footer__column-title (Element - column heading)
   - .footer__list (Element - link list)
   - .footer__item (Element - list item)
   - .footer__link (Element - navigation link)
   - .footer__social (Element - social media container)
   - .footer__bottom (Element - bottom copyright bar)
   - .footer__copyright (Element - copyright text)
   - .footer__credits (Element - credits text)
   ========================================================================== */

 .footer {
     background: #121212;
     /* Modern dark background */
     color: var(--color-white);
     padding: var(--spacing-4xl) 0 var(--spacing-xl) 0;
     /* 96px top, 32px bottom */
     position: relative;
     overflow: hidden;
 }

 /* Screen reader only class */
 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
 }

 /* Footer container */
 .footer__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--spacing-md);
     position: relative;
     z-index: 1;
 }

 /* Main footer content area */
 .footer__content {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--spacing-2xl);
     margin-bottom: var(--spacing-2xl);
     position: relative;
 }

 /* Add decorative elements */
 .footer:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, var(--color-primary-yellow) 0%, var(--color-orange-accent) 100%);
 }

 .footer:after {
     content: '';
     position: absolute;
     top: 60px;
     right: -50px;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, rgba(255, 193, 7, 0.1) 0%, rgba(255, 143, 0, 0) 70%);
     border-radius: 50%;
     z-index: 0;
 }

 /* Add subtle grain texture overlay */
 .footer:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--color-primary-yellow) 0%, var(--color-orange-accent) 100%);
     z-index: 2;
 }

 .footer__container:after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
     opacity: 0.12;
     pointer-events: none;
     z-index: 0;
 }

 /* Footer brand section */
 .footer__brand {
     max-width: 400px;
 }

 /* Footer logo styling */
 .footer__logo {
     display: flex;
     align-items: center;
     font-family: var(--font-family-secondary);
     font-weight: var(--font-weight-bold);
     color: var(--color-white);
     text-decoration: none !important;
     /* Ensure no default underline */
     margin-bottom: var(--spacing-md);
     transition: transform var(--transition-fast);
 }

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

 .footer__logo-image {
     width: 48px;
     height: 48px;
     margin-right: var(--spacing-md);
     transition: transform 0.3s ease;
 }

 .footer__logo:hover .footer__logo-image {
     transform: scale(1.1) rotate(5deg);
 }

 .footer__logo-text {
     color: var(--color-white);
     letter-spacing: 0.5px;
     font-size: var(--font-size-3xl);
     /* Increased from default */
     font-weight: var(--font-weight-bold);
     position: relative;
 }

 .footer__logo-text::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -5px;
     width: 100%;
     height: 2px;
     background: var(--color-primary-yellow);
     transform: scaleX(0.7);
     transition: transform 0.3s ease;
 }

 .footer__logo:hover .footer__logo-text::after {
     transform: scaleX(1);
 }

 /* Footer description text */
 .footer__description {
     color: rgba(255, 255, 255, 0.7);
     /* Semi-transparent white */
     line-height: var(--line-height-relaxed);
     margin: 0 0 var(--spacing-xl) 0;
     font-size: var(--font-size-base);
     max-width: 90%;
 }

 /* Newsletter section */
 .footer__newsletter {
     margin-top: var(--spacing-xl);
 }

 .footer__newsletter-form {
     display: flex;
     margin-top: var(--spacing-md);
     max-width: 100%;
 }

 .footer__newsletter-input {
     flex: 1;
     padding: 10px 16px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px 0 0 4px;
     color: var(--color-white);
     font-family: var(--font-family-primary);
     font-size: var(--font-size-sm);
     transition: all var(--transition-fast);
 }

 .footer__newsletter-input:focus {
     outline: none;
     border-color: var(--color-primary-yellow);
     background: rgba(255, 255, 255, 0.15);
 }

 .footer__newsletter-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 .footer__newsletter-button {
     padding: 10px 20px;
     background: var(--color-primary-yellow);
     border: none;
     border-radius: 0 4px 4px 0;
     color: #121212;
     font-family: var(--font-family-primary);
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-sm);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .footer__newsletter-button:hover,
 .footer__newsletter-button:focus {
     background: var(--color-orange-accent);
     transform: translateY(-1px);
 }

 /* Footer links container */
 .footer__links {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: var(--spacing-xl);
     padding-top: var(--spacing-md);
 }

 /* Footer column styling */
 .footer__column {
     position: relative;
 }

 /* Footer column title */
 .footer__column-title {
     margin: 0 0 var(--spacing-lg) 0;
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
     color: var(--color-white);
     position: relative;
     padding-bottom: 10px;
 }

 .footer__column-title:after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     height: 3px;
     width: 40px;
     background: var(--color-primary-yellow);
     border-radius: 2px;
 }

 /* Footer link list */
 .footer__list {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 /* Footer list item */
 .footer__item {
     margin-bottom: var(--spacing-sm);
     position: relative;
     transition: transform var(--transition-fast);
 }

 .footer__item:hover {
     transform: translateX(4px);
 }

 /* Footer link styling */
 .footer__link {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: all var(--transition-fast);
     display: inline-block;
     position: relative;
     padding: 2px 0;
 }

 .footer__link:hover,
 .footer__link:focus {
     color: var(--color-primary-yellow);
 }

 .footer__link:after {
     content: '';
     position: absolute;
     width: 0;
     height: 1px;
     bottom: 0;
     left: 0;
     background-color: var(--color-primary-yellow);
     transition: width var(--transition-fast);
 }

 .footer__link:hover:after,
 .footer__link:focus:after {
     width: 100%;
 }

 /* Social media links container */
 .footer__social {
     display: flex;
     gap: var(--spacing-md);
     margin-top: var(--spacing-md);
 }

 /* Social media link styling */
 .footer__social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 50%;
     color: var(--color-white);
     text-decoration: none;
     transition: all var(--transition-fast);
     border: 1px solid rgba(255, 255, 255, 0.1);
     overflow: hidden;
     position: relative;
 }

 .footer__social-link:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--color-primary-yellow);
     transform: translateY(100%);
     transition: transform var(--transition-fast);
     z-index: -1;
 }

 .footer__social-link:hover,
 .footer__social-link:focus {
     color: #121212;
     transform: translateY(-2px);
     border-color: var(--color-primary-yellow);
 }

 .footer__social-link:hover:before,
 .footer__social-link:focus:before {
     transform: translateY(0);
 }

 /* Footer bottom section */
 .footer__bottom {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--spacing-sm);
     padding-top: var(--spacing-xl);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
     margin-top: var(--spacing-xl);
     position: relative;
 }

 .footer__bottom:before {
     content: '';
     position: absolute;
     top: -1px;
     left: 50%;
     transform: translateX(-50%);
     width: 40%;
     height: 1px;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 193, 7, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
 }

 /* Copyright text */
 .footer__copyright {
     margin: 0;
     color: rgba(255, 255, 255, 0.6);
     font-size: var(--font-size-sm);
     letter-spacing: 0.5px;
 }

 /* Credits text */
 .footer__credits {
     margin: 0;
     color: rgba(255, 255, 255, 0.6);
     font-size: var(--font-size-sm);
 }

 /* Responsive Footer Layout */
 @media (min-width: 768px) {
     .footer__content {
         grid-template-columns: 1fr 2fr;
         align-items: start;
     }

     .footer__bottom {
         flex-direction: row;
         justify-content: space-between;
     }
 }

 @media (min-width: 992px) {
     .footer__brand {
         padding-right: var(--spacing-xl);
     }

     .footer__links {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .footer__credits {
     margin: 0;
     color: rgba(255, 255, 255, 0.6);
     font-size: var(--font-size-sm);
 }

 /* ==========================================================================
   RESPONSIVE DESIGN FOR COMPONENTS
   ========================================================================== */

 /* Tablet and up */
 @media (min-width: 768px) {

     /* Footer responsive layout */
     .footer__content {
         grid-template-columns: 1fr 2fr;
         align-items: start;
     }

     .footer__bottom {
         flex-direction: row;
         justify-content: space-between;
         text-align: left;
     }

     /* Category cards grid */
     .categories__grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

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

     /* Category cards full grid */
     .categories__grid {
         grid-template-columns: repeat(4, 1fr);
     }

     /* Enhanced card hover effects on larger screens */
     .card:hover {
         transform: translateY(-6px);
     }

     .category-card:hover {
         transform: translateY(-10px);
     }
 }


 /* ===== ADDITIONAL COMPONENTS FOR STYLE GUIDE ===== */

 /**
 * ====================================================================
 * EXTENDED BUTTON COMPONENTS
 * ====================================================================
 * Additional button variations and states for comprehensive style guide
 */

 /* Button Base Styles (Enhanced) */
 .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-xs);
     padding: var(--spacing-sm) var(--spacing-lg);
     font-family: var(--font-family-primary);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: 1;
     text-decoration: none;
     text-align: center;
     white-space: nowrap;
     border: 2px solid transparent;
     border-radius: var(--border-radius-base);
     cursor: pointer;
     transition: all var(--transition-fast);
     user-select: none;
     vertical-align: middle;
 }

 .button:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.2);
 }

 .button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
 }

 /* Primary Button */
 .button--primary {
     background-color: var(--color-primary-green);
     color: var(--color-white);
     border-color: var(--color-primary-green);
 }

 .button--primary:hover {
     background-color: var(--color-secondary-green);
     border-color: var(--color-secondary-green);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(45, 90, 39, 0.2);
 }

 .button--primary:active {
     transform: translateY(0);
     box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
 }

 /* Secondary Button */
 .button--secondary {
     background-color: var(--color-primary-yellow);
     color: var(--color-text-primary);
     border-color: var(--color-primary-yellow);
 }

 .button--secondary:hover {
     background-color: var(--color-secondary-yellow);
     border-color: var(--color-secondary-yellow);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
 }

 .button--secondary:active {
     transform: translateY(0);
     box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
 }

 /* Outline Button */
 .button--outline {
     background-color: transparent;
     color: var(--color-primary-green);
     border-color: var(--color-primary-green);
 }

 .button--outline:hover {
     background-color: var(--color-primary-green);
     color: var(--color-white);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(45, 90, 39, 0.2);
 }

 .button--outline:active {
     transform: translateY(0);
     box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
 }

 /* Button Sizes */
 .button--small {
     padding: var(--spacing-xs) var(--spacing-md);
     font-size: var(--font-size-sm);
 }

 .button--large {
     padding: var(--spacing-md) var(--spacing-xl);
     font-size: var(--font-size-lg);
 }

 .button--full-width {
     width: 100%;
 }

 /**
 * ====================================================================
 * FORM COMPONENTS
 * ====================================================================
 * Comprehensive form styling for inputs, selects, and textareas
 */

 /* Form Group */
 .form-group {
     margin-bottom: var(--spacing-lg);
 }

 /* Form Labels */
 .form-label {
     display: block;
     font-weight: var(--font-weight-medium);
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-sm);
     font-size: var(--font-size-base);
 }

 .form-label--required::after {
     content: " *";
     color: #dc3545;
 }

 /* Form Inputs */
 .form-input,
 .form-textarea,
 .form-select {
     width: 100%;
     padding: var(--spacing-sm) var(--spacing-md);
     font-family: var(--font-family-primary);
     font-size: var(--font-size-base);
     line-height: var(--line-height-base);
     color: var(--color-text-primary);
     background-color: var(--color-white);
     border: 2px solid #e9ecef;
     border-radius: var(--border-radius-base);
     transition: all var(--transition-fast);
     box-sizing: border-box;
 }

 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
     outline: none;
     border-color: var(--color-primary-green);
     box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
 }

 .form-input:invalid,
 .form-textarea:invalid,
 .form-select:invalid {
     border-color: #dc3545;
 }

 .form-input:invalid:focus,
 .form-textarea:invalid:focus,
 .form-select:invalid:focus {
     box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
 }

 /* Textarea Specific */
 .form-textarea {
     resize: vertical;
     min-height: 100px;
 }

 /* Select Specific */
 .form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
     background-position: right var(--spacing-sm) center;
     background-repeat: no-repeat;
     background-size: 16px 12px;
     padding-right: var(--spacing-xl);
     appearance: none;
 }

 /* Form Help Text */
 .form-help {
     font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     margin-top: var(--spacing-xs);
 }

 /* Form Error Text */
 .form-error {
     font-size: var(--font-size-sm);
     color: #dc3545;
     margin-top: var(--spacing-xs);
 }

 /**
 * ====================================================================
 * BADGE COMPONENTS
 * ====================================================================
 * Category badges and status indicators
 */

 .badge {
     display: inline-block;
     padding: var(--spacing-xs) var(--spacing-sm);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-bold);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-radius: var(--border-radius-base);
     line-height: 1;
 }

 .badge--recipes {
     background-color: var(--color-primary-green);
     color: var(--color-white);
 }

 .badge--restaurants {
     background-color: var(--color-secondary-green);
     color: var(--color-white);
 }

 .badge--travel {
     background-color: var(--color-primary-yellow);
     color: var(--color-text-primary);
 }

 .badge--culture {
     background-color: var(--color-orange-accent);
     color: var(--color-white);
 }

 .badge--featured {
     background-color: var(--color-secondary-yellow);
     color: var(--color-text-primary);
 }

 /**
 * ====================================================================
 * ALERT COMPONENTS
 * ====================================================================
 * Status messages and notifications
 */

 .alert {
     padding: var(--spacing-md);
     margin-bottom: var(--spacing-lg);
     border: 1px solid transparent;
     border-radius: var(--border-radius-base);
     border-left: 4px solid;
 }

 .alert--success {
     color: #155724;
     background-color: #d4edda;
     border-color: #c3e6cb;
     border-left-color: #28a745;
 }

 .alert--info {
     color: #0c5460;
     background-color: #d1ecf1;
     border-color: #bee5eb;
     border-left-color: #17a2b8;
 }

 .alert--warning {
     color: #856404;
     background-color: #fff3cd;
     border-color: #ffeaa7;
     border-left-color: #ffc107;
 }

 .alert--error {
     color: #721c24;
     background-color: #f8d7da;
     border-color: #f5c6cb;
     border-left-color: #dc3545;
 }

 /**
 * ====================================================================
 * LIST COMPONENTS
 * ====================================================================
 * Styled lists for navigation and content
 */

 .styled-list {
     margin: 0;
     padding-left: var(--spacing-lg);
 }

 .styled-list li {
     margin-bottom: var(--spacing-sm);
     line-height: var(--line-height-relaxed);
 }

 .styled-list--unstyled {
     list-style: none;
     padding-left: 0;
 }

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

 .nav-list li {
     margin-bottom: var(--spacing-xs);
 }

 .nav-link {
     display: block;
     padding: var(--spacing-sm) var(--spacing-md);
     color: var(--color-text-primary);
     text-decoration: none;
     border-radius: var(--border-radius-base);
     transition: all var(--transition-fast);
 }

 .nav-link:hover,
 .nav-link:focus {
     background-color: var(--color-primary-green);
     color: var(--color-white);
     text-decoration: none;
 }

 .nav-link--active {
     background-color: var(--color-primary-green);
     color: var(--color-white);
 }

 /**
 * ====================================================================
 * UTILITY CLASSES
 * ====================================================================
 * Helper classes for common styling needs
 */

 /* Text Utilities */
 .text-center {
     text-align: center;
 }

 .text-left {
     text-align: left;
 }

 .text-right {
     text-align: right;
 }

 .text-primary {
     color: var(--color-primary-green);
 }

 .text-secondary {
     color: var(--color-text-secondary);
 }

 .text-muted {
     color: var(--color-text-secondary);
     opacity: 0.7;
 }

 .text-white {
     color: var(--color-white);
 }

 .text-small {
     font-size: var(--font-size-sm);
 }

 .text-large {
     font-size: var(--font-size-lg);
 }

 .font-weight-normal {
     font-weight: var(--font-weight-normal);
 }

 .font-weight-medium {
     font-weight: var(--font-weight-medium);
 }

 .font-weight-semibold {
     font-weight: var(--font-weight-semibold);
 }

 .font-weight-bold {
     font-weight: var(--font-weight-bold);
 }

 /* Spacing Utilities */
 .margin-0 {
     margin: 0;
 }

 .margin-top-0 {
     margin-top: 0;
 }

 .margin-bottom-0 {
     margin-bottom: 0;
 }

 .padding-0 {
     padding: 0;
 }

 .padding-small {
     padding: var(--spacing-sm);
 }

 .padding-medium {
     padding: var(--spacing-md);
 }

 .padding-large {
     padding: var(--spacing-lg);
 }

 /* Display Utilities */
 .d-block {
     display: block;
 }

 .d-inline {
     display: inline;
 }

 .d-inline-block {
     display: inline-block;
 }

 .d-flex {
     display: flex;
 }

 .d-grid {
     display: grid;
 }

 .d-none {
     display: none;
 }

 /* Flex Utilities */
 .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .flex-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .flex-column {
     flex-direction: column;
 }

 .flex-wrap {
     flex-wrap: wrap;
 }

 /* Border Utilities */
 .border {
     border: 1px solid #e9ecef;
 }

 .border-top {
     border-top: 1px solid #e9ecef;
 }

 .border-bottom {
     border-bottom: 1px solid #e9ecef;
 }

 .border-0 {
     border: 0;
 }

 .rounded {
     border-radius: var(--border-radius-base);
 }

 .rounded-lg {
     border-radius: var(--border-radius-lg);
 }

 .rounded-full {
     border-radius: 50%;
 }

 /* Shadow Utilities */
 .shadow-sm {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .shadow {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .shadow-lg {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }

 .shadow-none {
     box-shadow: none;
 }

 /* Background Utilities */
 .bg-white {
     background-color: var(--color-white);
 }

 .bg-neutral {
     background-color: var(--color-neutral-bg);
 }

 .bg-primary {
     background-color: var(--color-primary-green);
 }

 .bg-secondary {
     background-color: var(--color-secondary-green);
 }

 /* Responsive Utilities */
 @media (max-width: 768px) {
     .d-md-none {
         display: none;
     }

     .d-md-block {
         display: block;
     }

     .text-md-center {
         text-align: center;
     }
 }

 @media (max-width: 480px) {
     .d-sm-none {
         display: none;
     }

     .d-sm-block {
         display: block;
     }

     .text-sm-center {
         text-align: center;
     }
 }

 /* Card Read More Link
   ========================================================================== */
 .card__read-more {
     display: inline-flex;
     align-items: center;
     margin-top: 0;
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-semibold);
     color: var(--color-primary);
     text-decoration: none;
     transition: all var(--transition-fast);
     opacity: 0.9;
 }

 .card__read-more:hover {
     opacity: 1;
     color: var(--color-primary-dark);
 }

 .card__read-more .arrow {
     display: inline-block;
     margin-left: var(--spacing-xs);
     transform: translateX(0);
     transition: transform 0.3s ease;
 }

 .card__read-more:hover .arrow {
     transform: translateX(5px);
 }

 /* Traditional Card Design for BEFORE demonstration
   ========================================================================== */
 .card--before {
     background: var(--color-white);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
     border-radius: var(--border-radius-md);
     overflow: hidden;
     border: 1px solid var(--color-border);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card--before:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .card--before .card__image-container {
     height: 240px;
     position: relative;
     overflow: hidden;
     border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }

 .card--before .card__title-overlay {
     display: none;
     /* Hide the title overlay for traditional cards */
 }

 .card--before .card__title {
     margin: 0 0 var(--spacing-md) 0;
     font-size: var(--font-size-xl);
     font-weight: var(--font-weight-bold);
     line-height: 1.3;
     color: var(--color-text-primary);
 }

 .card--before .card__link {
     color: var(--color-text-primary);
     text-decoration: none;
     text-shadow: none;
 }

 .card--before .card__link:hover {
     color: var(--color-primary);
 }

 .card--before .card__content {
     padding: var(--spacing-xl);
     background-color: var(--color-white);
 }

 .card--before .card__excerpt {
     padding: 0;
     margin-bottom: var(--spacing-md);
     font-family: var(--font-family-serif);
     color: var(--color-text-secondary);
     line-height: var(--line-height-relaxed);
     font-size: var(--font-size-base);
 }










 /* ==========================================================================
   EATERIES CSS - Complete Styling for Eateries Directory & Section
   ========================================================================== */

 /*
  TABLE OF CONTENTS:
  
  1. EATERIES SECTION (Homepage Component)
     - Main container styling
     - Background decorative elements
     - Header and content layout
  
  2. EATERIES DIRECTORY PAGE
     - Hero section with background image
     - Categories grid with interactive cards
     - Call-to-action section
  
  3. EATERIES GRID (Interactive Restaurant Listings)
     - Grid layout and item styling
     - Filter buttons and animations
     - Hover effects and transitions
  
  4. RESPONSIVE DESIGN
     - Tablet breakpoints (1024px, 768px)
     - Mobile breakpoints (576px, 480px, 375px)
     - Touch device optimizations
  
  5. ANIMATIONS & INTERACTIONS
     - Card hover effects
     - Filter transitions
     - Button animations
*/

 /* ==========================================================================
   1. EATERIES SECTION STYLES (Homepage Component)
   ========================================================================== */

 /* Main section container with decorative background elements */
 .eateries-section {
     padding: var(--spacing-5xl) 0;
     background-color: var(--color-primary-green-light);
     position: relative;
     overflow: hidden;
     /* Hide decorative overflow elements */
 }

 /* Decorative circular gradient - top right */
 .eateries-section::before {
     content: '';
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
     top: -250px;
     right: -100px;
     z-index: 1;
 }

 /* Decorative circular gradient - bottom left */
 .eateries-section::after {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(var(--color-primary-yellow-rgb), 0.15) 0%, rgba(var(--color-primary-yellow-rgb), 0) 70%);
     bottom: -200px;
     left: -100px;
     z-index: 1;
 }

 /* Main content container with proper spacing and z-index */
 .eateries-container {
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     padding: 0 var(--spacing-xl);
     position: relative;
     z-index: 2;
     /* Above decorative elements */
 }

 /* Section header with centered layout */
 .eateries-header {
     text-align: center;
     margin-bottom: var(--spacing-4xl);
     position: relative;
     padding-bottom: var(--spacing-xl);
     /* Space between title and content */
     width: 100%;
     /* Ensure full width */
     display: flex;
     flex-direction: column;
     align-items: center;
     /* Center all content */
     justify-content: center;
 }

 /* Mobile responsive styles for eateries header */
 @media (max-width: 768px) {
     .eateries-header {
         margin-bottom: var(--spacing-2xl);
         padding-bottom: var(--spacing-md);
         padding: 0 var(--spacing-md);
         /* Add horizontal padding */
     }
 }

 @media (max-width: 480px) {
     .eateries-header {
         margin-bottom: var(--spacing-xl);
         padding: 0 var(--spacing-sm);
         /* Less padding on small screens */
         text-align: center;
     }
 }

 /* ==========================================================================
   2. EATERIES DIRECTORY PAGE STYLES
   ========================================================================== */

 /* HERO SECTION - Full-width background image with overlay text */

 /* Main hero container with responsive height */
 .eateries-hero {
     position: relative;
     min-height: 60vh;
     /* Consistent with blog template */
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background-color: #000;
     /* Fallback before image loads */
     margin: 0;
     /* Remove margin to eliminate white gap */
 }

 /* Background image container */
 .eateries-hero__background {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
 }

 /* Background image with enhanced styling and animation */
 .eateries-hero__background-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     filter: saturate(1.2) contrast(1.1) brightness(1.05);
     /* Enhanced vibrancy */
     transform: scale(1.02);
     /* Slight scale to prevent border gaps */
     transition: transform 12s ease-out;
     animation: heroImageZoom 20s ease-out forwards;
 }

 /* Subtle zoom animation for hero image */
 @keyframes heroImageZoom {
     0% {
         transform: scale(1.02);
     }

     100% {
         transform: scale(1.08);
     }
 }

 /* Dark overlay for text readability while preserving image vibrancy */
 .eateries-hero__overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
     z-index: 2;
 }

 /* Content container with proper positioning and spacing */
 .eateries-hero__container {
     position: relative;
     z-index: 3;
     text-align: center;
     color: var(--color-white);
     width: 100%;
     max-width: var(--container-max-width);
     padding: 0 var(--spacing-lg);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* Inner content wrapper with max-width constraint */
 .eateries-hero__content {
     max-width: 800px;
     margin: 0 auto;
 }

 /* Main hero title with responsive typography and strong shadows */
 .eateries-hero__title {
     font-family: var(--font-family-secondary);
     /* Source Serif Pro - same as homepage */
     font-size: clamp(2.5rem, 8vw, 5rem);
     /* Responsive scaling from 2.5rem to 5rem */
     font-weight: 700;
     /* Bold weight matching homepage */
     font-variation-settings: 'opsz' 60, 'wght' 700;
     line-height: 1.1;
     /* Tight line height for impact */
     margin-bottom: var(--spacing-lg);
     color: rgba(255, 255, 255, 0.98);
     /* Nearly opaque white */
     text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
     /* Strong shadow for visibility */
     letter-spacing: -0.02em;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     padding: 0.1em 0;
     /* Prevent text clipping */
     overflow: visible;
 }

 /* Decorative tagline wrapper with centered alignment */
 .eateries-hero__tagline-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-md);
     margin: var(--spacing-lg) 0;
     width: 100%;
 }

 /* Decorative lines flanking the subtitle */
 .eateries-hero__tagline-line {
     height: 1px;
     width: clamp(30px, 5vw, 80px);
     /* Responsive line width */
     background-color: var(--color-primary-yellow);
 }

 /* Subtitle with italic styling and responsive typography */
 .eateries-hero__subtitle {
     font-family: var(--font-family-accent);
     /* Source Serif Pro italic */
     font-size: clamp(1.2rem, 3vw, 1.8rem);
     font-weight: 400;
     font-variation-settings: 'opsz' 24, 'wght' 400;
     margin: 0 var(--spacing-md);
     color: var(--color-white);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     font-style: italic;
     letter-spacing: 0.05em;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     white-space: nowrap;
     /* Prevent wrapping on desktop */
 }

 /* Hero description with enhanced readability styling */
 .eateries-hero__description {
     font-size: var(--font-size-lg);
     line-height: var(--line-height-relaxed);
     margin-top: var(--spacing-xl);
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
     color: var(--color-white);
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
     /* Strong shadow for readability */
     opacity: 1;
     background: rgba(0, 0, 0, 0.3);
     /* Semi-transparent background */
     padding: var(--spacing-lg) var(--spacing-xl);
     border-radius: var(--border-radius-lg);
     backdrop-filter: blur(8px);
     /* Modern blur effect */
     -webkit-backdrop-filter: blur(8px);
     /* Safari support */
     border: 1px solid rgba(255, 255, 255, 0.1);
     /* Subtle border */
     box-sizing: border-box;
 }

 /* CATEGORIES SECTION - Grid of restaurant category cards */

 /* Main categories section with consistent spacing */
 .eateries-categories {
     padding: var(--spacing-5xl) 0 var(--spacing-5xl);
     background: var(--color-background);
     margin-top: 0;
     margin-bottom: 0;
 }

 /* Categories container matching homepage layout */
 .eateries-categories__container {
     max-width: 1200px;
     /* Match homepage container width */
     margin: 0 auto;
     padding: 0 var(--spacing-xl);
     position: relative;
 }

 /* Section header with centered styling */
 .eateries-categories__header {
     text-align: center;
     margin-bottom: var(--spacing-4xl);
 }

 /* Category section title with decorative underline */
 .eateries-categories__title {
     font-family: var(--font-family-secondary);
     /* Match homepage font */
     font-size: clamp(2rem, 5vw, 3rem);
     color: var(--color-text);
     margin-bottom: var(--spacing-md);
     font-weight: 600;
     position: relative;
 }

 /* Yellow underline decoration for section title */
 .eateries-categories__title::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: var(--color-primary-yellow);
     border-radius: 2px;
 }

 /* Section description text */
 .eateries-categories__description {
     font-size: 1.125rem;
     color: var(--color-text-secondary);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
     opacity: 0.9;
 }

 /* CATEGORY CARDS GRID - Responsive layout for category cards */

 /* Main grid container with flexible layout */
 .eateries-categories__grid {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-xl);
     margin-top: var(--spacing-4xl);
     justify-content: center;
     align-items: stretch;
     /* Equal height cards */
 }

 /* Tablet breakpoint adjustments */
 /* Desktop/Large tablet responsive layout */
 @media (max-width: 1024px) {

     /* Categories grid spacing */
     .eateries-categories__grid {
         gap: var(--spacing-lg);
     }

     /* Eateries grid layout for tablets */
     .eateries-grid {
         grid-template-columns: repeat(2, 1fr);
         /* 2 columns on tablets */
         gap: var(--spacing-md);
         justify-items: stretch;
     }

     .eateries-filter {
         flex-wrap: wrap;
         justify-content: center;
     }
 }

 /* Tablet responsiveness - maintain icon positioning */
 @media (min-width: 768px) and (max-width: 1024px) {
     .eatery-category-card__header {
         min-height: 48px;
         /* Consistent header height */
     }

     .eatery-category-card__icon {
         width: 46px;
         height: 46px;
     }

     .eatery-category-card__icon svg {
         width: 22px;
         height: 22px;
     }

     .eatery-category-card__title {
         font-size: 1.6rem;
         line-height: 1.2;
     }
 }

 /* Small tablet responsive layout */
 @media (max-width: 768px) {

     /* Categories grid layout */
     .eateries-categories__grid {
         display: flex;
         flex-wrap: wrap;
         gap: var(--spacing-md);
         justify-content: center;
     }

     .eatery-category-card {
         width: 48vw;
         /* Two cards per row */
         max-width: 360px;
         min-width: 220px;
         margin-bottom: var(--spacing-md);
     }

     /* CTA title responsive adjustments */
     .eateries-cta__title {
         white-space: normal;
         /* Allow text wrapping on tablets */
         line-height: 1.3;
     }

     /* Hero section adjustments */
     .eateries-hero {
         min-height: 60vh;
         /* Consistent height */
         margin-top: 70px;
         /* Account for mobile header height */
     }

     .eateries-hero__container {
         padding: 0 var(--spacing-lg);
     }

     .eateries-hero__content {
         max-width: 100%;
         /* Full width on tablets */
     }

     .eateries-hero__title {
         font-size: clamp(2rem, 10vw, 3.5rem);
         margin-bottom: var(--spacing-md);
     }

     .eateries-hero__subtitle {
         font-size: clamp(1rem, 4vw, 1.4rem);
         white-space: normal;
         /* Allow text wrapping */
         text-align: center;
     }

     .eateries-hero__tagline-wrapper {
         margin: var(--spacing-md) 0;
         flex-wrap: wrap;
     }

     .eateries-hero__tagline-line {
         width: clamp(20px, 4vw, 60px);
     }

     .eateries-hero__description {
         max-width: 100%;
         margin-top: var(--spacing-lg);
         padding: var(--spacing-md) var(--spacing-lg);
         font-size: 1rem;
         margin-left: 0;
         margin-right: 0;
     }

     /* Categories section adjustments */
     .eateries-categories__container {
         padding: 0 var(--spacing-lg);
     }

     .eateries-categories__grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-xl);
         margin-top: var(--spacing-3xl);
     }

     /* Category card adjustments for tablets */
     .eatery-category-card {
         height: 300px;
         max-width: 500px;
         margin: 0 auto;
     }

     .eatery-category-card__content {
         padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
     }

     .eatery-category-card__header {
         flex-direction: row;
         /* Keep horizontal layout */
         align-items: flex-start;
         gap: var(--spacing-md);
         margin-bottom: var(--spacing-md);
     }

     .eatery-category-card__title-wrapper {
         flex: 1;
         margin-right: 0;
     }

     .eatery-category-card__icon {
         width: 44px;
         height: 44px;
         flex-shrink: 0;
     }

     .eatery-category-card__title {
         font-size: 1.5rem;
         line-height: 1.3;
     }

     .eatery-category-card__description {
         font-size: 0.95rem;
         line-height: 1.5;
         margin-bottom: var(--spacing-md);
     }

     .eatery-category-card__count {
         font-size: 0.85rem;
         padding: 0.4rem 0.8rem;
     }

     /* CTA section adjustments */
     .eateries-cta__container {
         padding: 0 var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg);
     }

     .eateries-cta__buttons {
         flex-direction: column;
         align-items: stretch;
         gap: var(--spacing-md);
     }

     .eateries-cta__button {
         justify-content: center;
         width: 100%;
         max-width: 300px;
         margin: 0 auto;
     }

     /* Eateries grid and filter adjustments */
     .eateries-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: var(--spacing-sm);
         justify-items: stretch;
     }

     .eateries-filter-button {
         margin-bottom: var(--spacing-xs);
         font-size: var(--font-size-sm);
     }

     .eateries-section {
         padding: var(--spacing-xl) var(--spacing-md);
     }
 }

 /* Mobile single-column layout */
 /* Mobile single-column layout */
 @media (max-width: 576px) {

     /* Categories grid layout */
     .eateries-categories__grid {
         display: flex;
         flex-direction: column;
         gap: var(--spacing-lg);
         align-items: center;
         justify-content: center;
     }

     .eatery-category-card {
         width: 100%;
         /* Full width on mobile */
         max-width: 100%;
         margin-bottom: var(--spacing-lg);
     }

     /* Category card content adjustments */
     .eatery-category-card__content {
         padding-top: calc(var(--spacing-lg) + 5px);
         /* Extra padding for icon */
     }

     /* Eateries grid mobile layout */
     .eateries-grid {
         grid-template-columns: 1fr;
         /* Single column on mobile */
         gap: var(--spacing-lg);
         justify-items: stretch;
     }

     .eateries-item {
         width: 100%;
         max-width: 400px;
         /* Prevent cards from getting too wide */
     }

     .eateries-title {
         font-size: var(--font-size-lg);
     }

     .eateries-description-text {
         font-size: var(--font-size-sm);
     }

     /* Make card details always visible on mobile */
     .eateries-details {
         transform: translateY(0);
         background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
         padding-top: var(--spacing-3xl);
         padding-bottom: var(--spacing-md);
     }

     /* Better tap targets on mobile */
     .eateries-overlay {
         opacity: 0.7;
     }

     /* Mobile: Always show description and links */
     .eateries-item .eateries-description-text {
         opacity: 1;
         max-height: 80px;
         transform: translateY(0);
         font-size: var(--font-size-xs);
         line-height: 1.4;
     }

     .eateries-links {
         opacity: 1;
         transform: translateY(0);
         margin-top: var(--spacing-sm);
     }

     /* Button optimizations */
     .eateries-button {
         font-size: var(--font-size-sm);
         padding: var(--spacing-sm) var(--spacing-lg);
     }

     .eateries-button-container {
         margin-top: var(--spacing-2xl);
     }

     .eateries-header h2 {
         font-size: 1.75rem;
     }

     .eateries-section {
         padding: var(--spacing-3xl) 0 var(--spacing-2xl);
     }

     .eateries-container {
         padding: 0 var(--spacing-md);
     }
 }

 /* Remove duplicate media queries (consolidated above) */

 /* CATEGORY CARDS - Interactive cards with background images and content overlays */

 /* Main category card styling with hover animations */
 .eatery-category-card {
     position: relative;
     background: var(--color-surface);
     border-radius: var(--border-radius-xl);
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     /* Smooth bounce effect */
     border: 1px solid var(--color-border);
     cursor: pointer;
     height: 320px;
     /* Fixed height for consistency */
     width: 100%;
     max-width: 340px;
     /* Max width for horizontal layout */
     transform: translateY(0);
 }

 /* Card hover effects */
 .eatery-category-card:hover {
     transform: translateY(-12px);
     /* Lift effect */
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .eatery-category-card:hover .eatery-category-card__image {
     transform: scale(1.08);
     /* Image zoom on hover */
 }

 .eatery-category-card:hover .eatery-category-card__overlay {
     opacity: 0.7;
     /* Darken overlay on hover */
 }

 .eatery-category-card:hover .eatery-category-card__content {
     transform: translateY(-5px);
     /* Content lift on hover */
 }

 /* Background image container for category cards */
 .eatery-category-card__image-container {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
 }

 /* Background image with smooth transitions */
 .eatery-category-card__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: transform 0.6s ease;
 }

 /* Gradient overlay for text readability */
 .eatery-category-card__overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg,
             rgba(0, 0, 0, 0.4) 0%,
             rgba(0, 0, 0, 0.6) 50%,
             rgba(0, 0, 0, 0.8) 100%);
     opacity: 0.6;
     transition: opacity 0.4s ease;
     z-index: 1;
 }

 /* Card content container positioned at bottom */
 .eatery-category-card__content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: var(--spacing-xl);
     color: white;
     z-index: 2;
     transition: transform 0.4s ease;
     display: flex;
     flex-direction: column;
     overflow: visible;
     /* Ensure content isn't clipped */
 }

 /* Mobile-specific content adjustments for better icon positioning */
 /* Card header with title and icon layout */
 .eatery-category-card__header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: var(--spacing-md);
     position: relative;
     overflow: visible;
 }

 /* Category icon with glassmorphism effect */
 .eatery-category-card__icon {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     color: var(--color-primary-yellow);
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s ease;
     border: 2px solid rgba(255, 255, 255, 0.2);
     font-size: 1.2rem;
     position: relative;
     z-index: 3;
     flex-shrink: 0;
     top: 0;
     overflow: hidden;
 }

 /* SVG icon styling within category icon - consistent sizing */
 .eatery-category-card__icon svg {
     width: 24px;
     /* Fixed size for consistency */
     height: 24px;
     color: currentColor;
     stroke: currentColor;
     fill: none;
     stroke-width: 1.5;
     flex-shrink: 0;
 }

 /* Icon hover effect - yellow background with dark text */
 .eatery-category-card:hover .eatery-category-card__icon {
     background: var(--color-primary-yellow);
     color: var(--color-text-primary);
     transform: scale(1.1);
     border-color: var(--color-primary-yellow);
 }

 /* Title wrapper for proper flex layout */
 .eatery-category-card__title-wrapper {
     flex: 1;
     margin-right: var(--spacing-md);
 }

 /* Category card title styling */
 .eatery-category-card__title {
     font-family: var(--font-family-secondary);
     font-size: 1.75rem;
     color: white;
     margin-bottom: var(--spacing-xs);
     font-weight: 600;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
     line-height: 1.2;
     word-wrap: break-word;
     /* Allow breaking of long words */
     overflow-wrap: break-word;
     /* Modern browsers */
     hyphens: auto;
     /* Add hyphens for better breaking */
 }

 /* Category description text */
 .eatery-category-card__description {
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.5;
     margin-bottom: var(--spacing-lg);
     font-size: 1rem;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 }

 /* Statistics section for category cards */
 .eatery-category-card__stats {
     margin-bottom: var(--spacing-lg);
 }

 /* Restaurant count badge with glassmorphism */
 .eatery-category-card__count {
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     color: white;
     padding: 0.5rem 1rem;
     border-radius: var(--border-radius-full);
     font-size: 0.875rem;
     font-weight: 600;
     display: inline-block;
     border: 1px solid rgba(255, 255, 255, 0.3);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }

 /* "View All" link with animated underline */
 .eatery-category-card__link {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--color-primary-yellow);
     text-decoration: none;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.3s ease;
     position: relative;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }

 /* Animated underline effect */
 .eatery-category-card__link::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--color-primary-yellow);
     transition: width 0.3s ease;
 }

 /* Link hover effects */
 .eatery-category-card:hover .eatery-category-card__link::after {
     width: 100%;
     /* Full underline on hover */
 }

 .eatery-category-card__link:hover {
     color: white;
     transform: translateX(4px);
     /* Slide effect */
 }

 /* TOUCH DEVICE OPTIMIZATIONS - Disable hover effects on touch devices */
 @media (hover: none) and (pointer: coarse) {
     .eatery-category-card:hover {
         transform: none;
         /* Disable hover transforms */
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         /* Reset to default shadow */
     }

     .eatery-category-card:hover .eatery-category-card__image {
         transform: none;
         /* Disable image zoom */
     }

     .eatery-category-card:hover .eatery-category-card__overlay {
         opacity: 0.6;
         /* Reset to default opacity */
     }

     .eatery-category-card:hover .eatery-category-card__content {
         transform: none;
         /* Disable content transform */
     }

     .eatery-category-card:hover .eatery-category-card__icon {
         transform: none;
         /* Disable icon transform */
     }

     /* Active states for better touch feedback */
     .eatery-category-card:active {
         transform: scale(0.98);
         transition: transform 0.1s ease;
     }

     .eatery-category-card__link:active {
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 4px;
         padding: 2px 4px;
         margin: -2px -4px;
     }
 }

 /* CALL TO ACTION SECTION - Bottom section with action buttons */

 /* CTA section with gradient background */
 .eateries-cta {
     background: linear-gradient(135deg,
             var(--color-primary-green-light) 0%,
             var(--color-primary-green) 50%,
             var(--color-primary-green-dark) 100%);
     padding: var(--spacing-5xl) 0;
     text-align: center;
     position: relative;
     overflow: hidden;
     margin-bottom: 0;
 }

 /* CTA container with centered layout */
 .eateries-cta__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--spacing-xl) var(--spacing-4xl) var(--spacing-xl);
     position: relative;
     z-index: 2;
 }

 /* CTA content wrapper with max-width constraint */
 .eateries-cta__content {
     max-width: 700px;
     margin: 0 auto;
 }

 /* CTA section title with decorative underline */
 .eateries-cta__title {
     font-family: var(--font-family-secondary);
     font-size: clamp(2rem, 5vw, 3rem);
     color: var(--color-white);
     margin-bottom: var(--spacing-lg);
     font-weight: 600;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     position: relative;
     line-height: 1.2;
     white-space: nowrap;
     /* Prevent wrapping on desktop */
     text-align: center;
 }

 /* Yellow underline decoration for CTA title */
 .eateries-cta__title::after {
     content: '';
     position: absolute;
     bottom: -12px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: var(--color-primary-yellow);
     border-radius: 2px;
 }

 /* CTA description text */
 .eateries-cta__description {
     font-size: 1.25rem;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
     margin-bottom: var(--spacing-4xl);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 /* Button container with flexible layout */
 .eateries-cta__buttons {
     display: flex;
     gap: var(--spacing-lg);
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }

 /* CTA BUTTONS - Styled action buttons with animations */

 /* Base button styling with glassmorphism and animations */
 .eateries-cta__button {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 1.25rem 2.5rem;
     border-radius: var(--border-radius-full);
     text-decoration: none;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     /* Smooth bounce effect */
     border: 2px solid transparent;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }

 /* Shine effect animation for buttons */
 .eateries-cta__button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.6s ease;
     z-index: 0;
 }

 .eateries-cta__button:hover::before {
     left: 100%;
     /* Shine animation on hover */
 }

 /* Button text positioning above shine effect */
 .eateries-cta__button span {
     position: relative;
     z-index: 1;
 }

 /* Primary button styling (yellow) */
 .eateries-cta__button--primary {
     background: var(--color-primary-yellow);
     color: var(--color-text-primary);
     border-color: var(--color-primary-yellow);
 }

 .eateries-cta__button--primary:hover {
     background: var(--color-white);
     color: var(--color-primary-green-dark);
     border-color: var(--color-white);
     transform: translateY(-4px);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 }

 /* Secondary button styling (transparent with glassmorphism) */
 .eateries-cta__button--secondary {
     background: rgba(255, 255, 255, 0.1);
     color: var(--color-white);
     border-color: rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .eateries-cta__button--secondary:hover {
     background: var(--color-white);
     color: var(--color-primary-green-dark);
     border-color: var(--color-white);
     transform: translateY(-4px);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 }

 /* ==========================================================================
   3. RESPONSIVE DESIGN - Tablet and Mobile Breakpoints
   ========================================================================== */

 /* MOBILE BREAKPOINT (480px) - Optimizations for small screens */
 @media (max-width: 480px) {
     .eateries-hero {
         min-height: 60vh;
         /* Consistent with blog template */
         margin-top: 60px;
         /* Adjust for smaller mobile header */
     }

     .eateries-hero__container {
         padding: 0 var(--spacing-md);
     }

     .eateries-hero__title {
         font-size: clamp(1.75rem, 8vw, 2.5rem);
         margin-bottom: var(--spacing-sm);
     }

     .eateries-hero__subtitle {
         font-size: clamp(0.9rem, 3.5vw, 1.2rem);
         margin: 0 var(--spacing-sm);
     }

     .eateries-hero__tagline-wrapper {
         margin: var(--spacing-sm) 0;
     }

     .eateries-hero__tagline-line {
         width: clamp(15px, 3vw, 40px);
     }

     .eateries-hero__description {
         padding: var(--spacing-sm) var(--spacing-md);
         margin-top: var(--spacing-md);
         font-size: 0.9rem;
         line-height: 1.5;
     }

     /* Categories section mobile adjustments */
     .eateries-categories__container {
         padding: 0 var(--spacing-md);
     }

     .eateries-categories__grid {
         gap: var(--spacing-lg);
     }

     /* Category cards optimized for mobile */
     .eatery-category-card {
         height: 280px;
         min-width: unset;
         max-width: 100%;
         margin: 0;
     }

     .eatery-category-card__content {
         padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
     }

     .eatery-category-card__header {
         display: flex;
         /* Keep flex layout */
         justify-content: space-between;
         /* Icon stays on right */
         align-items: flex-start;
         /* Align to top */
         margin-bottom: var(--spacing-sm);
         position: relative;
         min-height: 48px;
         /* Ensure consistent height */
     }

     .eatery-category-card__title-wrapper {
         margin-right: var(--spacing-sm);
         /* Add space between title and icon */
         flex: 1;
         /* Take remaining space */
         max-width: calc(100% - 60px);
         /* Reserve space for icon */
     }

     .eatery-category-card__icon {
         width: 44px;
         /* Consistent size */
         height: 44px;
         font-size: 1.1rem;
         flex-shrink: 0;
         /* Don't shrink */
         position: relative;
         /* Remove absolute positioning */
         margin-left: auto;
         /* Push to right */
     }

     .eatery-category-card__title {
         font-size: 1.4rem;
         line-height: 1.2;
         margin-bottom: var(--spacing-xs);
         word-wrap: break-word;
         overflow-wrap: break-word;
         hyphens: auto;
         max-width: 100%;
         /* Ensure it doesn't overflow */
     }

     .eatery-category-card__description {
         font-size: 0.9rem;
         line-height: 1.4;
         margin-bottom: var(--spacing-md);
         color: rgba(255, 255, 255, 0.95);
         /* Better readability */
     }

     .eatery-category-card__count {
         font-size: 0.8rem;
         padding: 0.35rem 0.75rem;
     }

     .eatery-category-card__link {
         font-size: 0.9rem;
         margin-top: var(--spacing-sm);
         min-height: 44px;
         /* Better touch target */
         display: flex;
         align-items: center;
     }

     /* Reduced hover effects for mobile */
     .eatery-category-card:hover {
         transform: translateY(-6px);
     }

     /* CTA section mobile adjustments */
     .eateries-cta__container {
         padding: 0 var(--spacing-md) var(--spacing-4xl) var(--spacing-md);
     }

     .eateries-cta__buttons {
         flex-direction: column;
         align-items: stretch;
         gap: var(--spacing-md);
     }

     .eateries-cta__button {
         justify-content: center;
         width: 100%;
         max-width: 300px;
         margin: 0 auto;
         padding: 1rem 2rem;
         min-height: 48px;
         /* Better touch target */
     }

     /* Additional mobile description styling */
     .eateries-hero__description {
         font-size: 1rem;
         padding: var(--spacing-md) var(--spacing-lg);
         margin-top: var(--spacing-lg);
     }

     /* Eateries item hover effects */
     .eateries-item:hover .eateries-description-text {
         color: rgba(255, 255, 255, 0.85);
     }

     /* Restaurant item specific mobile styling */
     .restaurant-item {
         border-radius: 12px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     .restaurant-item:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     }

     .restaurant-item__content {
         padding: var(--spacing-md);
     }

     .restaurant-item__name {
         font-size: 1.1rem;
         margin-bottom: var(--spacing-xs);
         line-height: 1.3;
     }

     .restaurant-item__details {
         font-size: 0.85rem;
         color: rgba(255, 255, 255, 0.8);
         margin-bottom: var(--spacing-sm);
         line-height: 1.4;
     }

     .restaurant-item__description {
         font-size: 0.8rem;
         line-height: 1.3;
         color: rgba(255, 255, 255, 0.9);
     }
 }

 /* VERY SMALL MOBILE DEVICES (375px) - Ultra-compact optimizations */
 @media (max-width: 375px) {
     .eateries-hero {
         min-height: 45vh;
         /* Smaller on very small screens */
         height: 45vh;
     }

     .eateries-hero__container {
         padding: 0 var(--spacing-sm);
     }

     .eateries-hero__title {
         font-size: clamp(1.5rem, 7vw, 2rem);
         margin-bottom: var(--spacing-xs);
     }

     .eateries-hero__subtitle {
         font-size: clamp(0.8rem, 3vw, 1rem);
         margin: 0 var(--spacing-xs);
     }

     .eateries-hero__description {
         padding: var(--spacing-xs) var(--spacing-sm);
         font-size: 0.85rem;
         line-height: 1.4;
         margin-top: var(--spacing-sm);
     }

     .eateries-categories__container {
         padding: 0 var(--spacing-sm);
     }

     .eatery-category-card {
         height: 260px;
     }

     .eatery-category-card__content {
         padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
     }

     .eatery-category-card__title {
         font-size: 1.25rem;
         word-wrap: break-word;
         overflow-wrap: break-word;
         hyphens: auto;
         line-height: 1.2;
         max-width: 100%;
     }

     .eatery-category-card__description {
         font-size: 0.85rem;
         line-height: 1.3;
     }

     .eatery-category-card__icon {
         width: 40px;
         /* Slightly smaller but consistent ratio */
         height: 40px;
         font-size: 1rem;
     }

     .eatery-category-card__icon svg {
         width: 20px;
         /* Proportionally smaller */
         height: 20px;
     }

     .eateries-hero__description {
         font-size: 0.9rem;
         padding: var(--spacing-sm) var(--spacing-md);
     }

     .eatery-category-card__count {
         font-size: 0.75rem;
         padding: 0.3rem 0.6rem;
     }

     .eatery-category-card__link {
         font-size: 0.85rem;
     }
 }

 /* ==========================================================================
   4. ANIMATIONS & INTERACTIONS - Scroll animations and motion preferences
   ========================================================================== */

 /* SCROLL ANIMATIONS - Category cards fade in on scroll (respects motion preferences) */
 @media (prefers-reduced-motion: no-preference) {
     .eatery-category-card {
         opacity: 0;
         transform: translateY(30px);
         animation: fadeInUp 0.6s ease forwards;
     }

     /* Staggered animation delays for smooth sequential appearance */
     .eatery-category-card:nth-child(1) {
         animation-delay: 0.1s;
     }

     .eatery-category-card:nth-child(2) {
         animation-delay: 0.2s;
     }

     .eatery-category-card:nth-child(3) {
         animation-delay: 0.3s;
     }

     .eatery-category-card:nth-child(4) {
         animation-delay: 0.4s;
     }

     .eatery-category-card:nth-child(5) {
         animation-delay: 0.5s;
     }

     .eatery-category-card:nth-child(6) {
         animation-delay: 0.6s;
     }

     /* Fade in and slide up animation */
     @keyframes fadeInUp {
         to {
             opacity: 1;
             transform: translateY(0);
         }
     }
 }

 /* FOOTER CONNECTION - Ensure seamless connection between sections */
 .footer {
     margin-top: 0 !important;
     /* Remove gap between CTA and footer */
 }

 /* ==========================================================================
   5. EATERIES GRID SYSTEM - Interactive restaurant listings with filtering
   ========================================================================== */

 /* SECTION TITLES AND DESCRIPTIONS */

 /* Main section title styling (inherits from global styles with custom colors) */
 .eateries-section-title {
     color: var(--color-white);
     /* White text for dark backgrounds */
     text-align: center;
     /* Ensure proper centering */
     width: 100%;
     /* Full width for centering */
     margin: 0 auto;
     /* Center the element */
 }

 /* Yellow underline for section headings */
 .eateries-section-title::after {
     background: var(--color-primary-yellow) !important;
     left: 50% !important;
     /* Center the underline */
     transform: translateX(-50%) !important;
     /* Perfect centering */
 }

 /* Mobile responsive styles for eateries title */
 @media (max-width: 768px) {
     .eateries-section-title {
         font-size: var(--font-size-lg) !important;
         line-height: 1.25;
         word-wrap: break-word;
         text-align: center;
         width: 100%;
         max-width: 100%;
     }
 }

 @media (max-width: 480px) {
     .eateries-section-title {
         font-size: var(--font-size-base) !important;
         /* 16px - same as featured section */
         line-height: 1.3;
         letter-spacing: 0.1px;
         word-wrap: break-word;
         overflow-wrap: break-word;
         hyphens: auto;
         white-space: normal;
         text-align: center;
         width: 100%;
         max-width: 100%;
         padding: 0 var(--spacing-xs);
     }

     .eateries-section-title::after {
         width: 50px !important;
     }
 }

 @media (max-width: 360px) {
     .eateries-section-title {
         font-size: var(--font-size-sm) !important;
         /* 14px for very small screens */
         line-height: 1.4;
         letter-spacing: 0.05px;
     }

     .eateries-section-title::after {
         width: 35px !important;
     }
 }

 @media (max-width: 320px) {
     .eateries-section-title {
         font-size: var(--font-size-xs) !important;
         /* 12px for ultra-small screens */
         line-height: 1.5;
         letter-spacing: 0;
         word-spacing: -1px;
     }

     .eateries-section-title::after {
         width: 30px !important;
     }
 }

 /* Section description with optimized readability */
 .eateries-description {
     font-size: var(--font-size-xl);
     color: var(--color-white);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.6;
     opacity: 0.9;
 }

 /* Mobile responsive styles for eateries description */
 @media (max-width: 768px) {
     .eateries-description {
         font-size: var(--font-size-lg);
         max-width: 90%;
         line-height: 1.5;
     }
 }

 @media (max-width: 480px) {
     .eateries-description {
         font-size: var(--font-size-base);
         max-width: 95%;
         line-height: 1.4;
         margin-top: var(--spacing-sm);
     }
 }

 /* FILTER SYSTEM - Interactive category filtering buttons */

 /* Filter button container with centered layout */
 .eateries-filter {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-3xl);
     gap: var(--spacing-sm);
     padding: 0 var(--spacing-sm);
 }

 /* Individual filter button styling */
 .eateries-filter-button {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     padding: var(--spacing-sm) var(--spacing-lg);
     margin: 0;
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     color: var(--color-white);
     cursor: pointer;
     border-radius: 30px;
     transition: all 0.3s ease;
 }

 /* Filter button hover state */
 .eateries-filter-button:hover {
     color: var(--color-white);
     background-color: var(--color-primary-green-dark);
 }

 /* Active filter button styling */
 .eateries-filter-button.active {
     color: var(--color-text-primary);
     background-color: var(--color-primary-yellow);
     font-weight: var(--font-weight-semibold);
     box-shadow: 0 3px 12px rgba(var(--color-primary-yellow-rgb), 0.3);
 }

 /* ==========================================================================
   EATERIES SHOWCASE - Beautiful CSS-Only Design (No JavaScript)
   ========================================================================== */

 /* Main showcase grid with asymmetric layout */
 .eateries-showcase-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     /* Featured item takes more space */
     grid-template-rows: 1fr 1fr;
     /* Two rows */
     gap: var(--spacing-lg, 1.5rem);
     /* Fallback value */
     margin: var(--spacing-3xl, 3rem) 0;
     /* Fallback value */
     min-height: 600px;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
 }

 /* Featured item spans 2 rows */
 .eateries-showcase-item--featured {
     grid-row: 1 / 3;
     /* Spans both rows */
     grid-column: 1;
     /* First column only */
     min-height: 600px;
     /* Ensure featured item is tall enough */
 }

 /* Individual showcase items */
 .eateries-showcase-item {
     position: relative;
     border-radius: var(--border-radius-lg, 12px);
     /* Fallback value */
     overflow: hidden;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
     background: var(--color-white, #ffffff);
     /* Fallback value */
     min-height: 280px;
     /* Consistent height for smaller cards */
     height: 100%;
     /* Fill grid cell */
 }

 /* Hover effects with smooth overlapping */
 .eateries-showcase-item:hover {
     transform: translateY(-12px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
     z-index: 10;
 }

 /* Image styling */
 .eateries-showcase-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .eateries-showcase-item:hover .eateries-showcase-image {
     transform: scale(1.1);
 }

 /* Overlay gradient */
 .eateries-showcase-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(180deg,
             rgba(0, 0, 0, 0.1) 0%,
             rgba(0, 0, 0, 0.3) 40%,
             rgba(0, 0, 0, 0.7) 80%,
             rgba(0, 0, 0, 0.9) 100%);
     opacity: 1;
     transition: opacity 0.3s ease;
 }

 .eateries-showcase-item:hover .eateries-showcase-overlay {
     opacity: 1;
 }

 /* Content styling */
 .eateries-showcase-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: var(--spacing-xl, 2rem);
     /* Fallback value */
     color: var(--color-white, #ffffff);
     /* Fallback value */
     transform: translateY(0);
     /* Always visible */
     transition: transform 0.4s ease;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
 }

 .eateries-showcase-item:hover .eateries-showcase-content {
     transform: translateY(-8px);
     /* Slight lift on hover */
 }

 /* Badge styling */
 .eateries-showcase-badge {
     display: inline-block;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(10px);
     padding: var(--spacing-xs) var(--spacing-sm);
     border-radius: var(--border-radius-full);
     font-size: var(--font-size-sm);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: var(--spacing-sm);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--color-primary-yellow);
     text-shadow: none;
 }

 /* Title styling */
 .eateries-showcase-title {
     font-size: var(--font-size-xl);
     font-weight: 700;
     margin: 0 0 var(--spacing-xs) 0;
     line-height: 1.2;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1);
     color: var(--color-white);
 }

 .eateries-showcase-item--featured .eateries-showcase-title {
     font-size: var(--font-size-2xl);
 }

 /* Location styling */
 .eateries-showcase-location {
     font-size: var(--font-size-sm);
     opacity: 0.9;
     margin: 0 0 var(--spacing-sm) 0;
     font-weight: 500;
     color: var(--color-primary-yellow);
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }

 /* Description styling */
 .eateries-showcase-description {
     font-size: var(--font-size-base);
     line-height: 1.5;
     margin: 0 0 var(--spacing-lg) 0;
     opacity: 0.95;
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }

 .eateries-showcase-item--featured .eateries-showcase-description {
     font-size: var(--font-size-lg);
 }

 /* Link styling */
 .eateries-showcase-link {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xs);
     color: var(--color-text-primary);
     text-decoration: none;
     font-weight: 600;
     font-size: var(--font-size-sm);
     padding: var(--spacing-sm) var(--spacing-md);
     background: var(--color-primary-yellow);
     border-radius: var(--border-radius-md);
     border: 1px solid var(--color-primary-yellow);
     transition: all 0.3s ease;
     text-shadow: none;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

 .eateries-showcase-link:hover {
     background: var(--color-white);
     color: var(--color-primary-green);
     transform: translateX(5px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }

 .eateries-showcase-link svg {
     transition: transform 0.3s ease;
 }

 .eateries-showcase-link:hover svg {
     transform: translateX(3px);
 }

 /* Call to action section */
 .eateries-showcase-cta {
     text-align: center;
     margin-top: var(--spacing-3xl);
 }

 .eateries-showcase-cta-button {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-sm);
     padding: var(--spacing-md) var(--spacing-xl);
     background: linear-gradient(135deg, var(--color-primary-green) 0%, var(--color-secondary-green) 100%);
     color: var(--color-white);
     text-decoration: none;
     font-weight: 600;
     font-size: var(--font-size-lg);
     border-radius: var(--border-radius-full);
     box-shadow: 0 8px 25px rgba(45, 90, 39, 0.3);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .eateries-showcase-cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(45, 90, 39, 0.4);
     background: linear-gradient(135deg, var(--color-secondary-green) 0%, var(--color-primary-yellow) 100%);
 }

 .eateries-showcase-cta-button svg {
     transition: transform 0.3s ease;
 }

 .eateries-showcase-cta-button:hover svg {
     transform: translateX(5px);
 }

 /* Responsive design */
 @media (max-width: 1024px) {
     .eateries-showcase-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto auto auto;
         gap: var(--spacing-md);
         min-height: auto;
     }

     .eateries-showcase-item--featured {
         grid-row: 1;
         grid-column: 1 / 3;
         /* Spans both columns */
         min-height: 350px;
     }

     .eateries-showcase-item {
         min-height: 250px;
     }
 }

 @media (max-width: 768px) {
     .eateries-showcase-grid {
         grid-template-columns: 1fr;
         grid-template-rows: auto;
         gap: var(--spacing-lg);
         min-height: auto;
     }

     .eateries-showcase-item--featured {
         grid-column: 1;
         grid-row: auto;
         min-height: 350px;
     }

     .eateries-showcase-item {
         min-height: 300px;
     }

     .eateries-showcase-content {
         padding: var(--spacing-lg);
     }

     .eateries-showcase-title {
         font-size: var(--font-size-lg);
     }

     .eateries-showcase-item--featured .eateries-showcase-title {
         font-size: var(--font-size-xl);
     }
 }

 @media (max-width: 480px) {
     .eateries-showcase-content {
         padding: var(--spacing-md);
     }

     .eateries-showcase-cta-button {
         padding: var(--spacing-sm) var(--spacing-lg);
         font-size: var(--font-size-base);
     }
 }

 /* ==========================================================================
   END OF EATERIES SHOWCASE CSS
   ========================================================================== */

 /* ==========================================================================
   END OF EATERIES CSS
   ========================================================================== */

 /* ==========================================================================
   MENUS LIST PAGE CSS
   ========================================================================== */

 /* Menus List Section */
 .menus-list {
     padding: var(--spacing-3xl) 0;
     background: var(--color-white);
 }

 .menus-list__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--spacing-lg);
 }

 /* Menus Grid */
 .menus-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: var(--spacing-2xl);
     margin-top: var(--spacing-2xl);
 }

 /* Menu Card */
 .menu-card {
     background: var(--color-white);
     border-radius: var(--border-radius-lg);
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
 }

 .menu-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 }

 /* Menu Card Image */
 .menu-card__image {
     width: 100%;
     height: 240px;
     overflow: hidden;
     position: relative;
     background: var(--color-gray-200);
 }

 .menu-card__image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .menu-card:hover .menu-card__image img {
     transform: scale(1.05);
 }

 /* Menu Card Content */
 .menu-card__content {
     padding: var(--spacing-xl);
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .menu-card__title {
     font-size: var(--font-size-xl);
     font-weight: 700;
     color: var(--color-primary-green);
     margin: 0 0 var(--spacing-md) 0;
     line-height: 1.2;
 }

 .menu-card__description {
     font-size: var(--font-size-base);
     color: var(--color-gray-700);
     line-height: 1.6;
     margin: 0 0 var(--spacing-md) 0;
     flex-grow: 1;
 }

 .menu-card__note {
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-sm);
     padding: var(--spacing-md);
     background: var(--color-primary-yellow-light);
     border-left: 3px solid var(--color-primary-yellow);
     border-radius: var(--border-radius-md);
     margin-bottom: var(--spacing-md);
     font-size: var(--font-size-sm);
     color: var(--color-gray-800);
 }

 .menu-card__note svg {
     flex-shrink: 0;
     margin-top: 2px;
     color: var(--color-primary-yellow);
 }

 .menu-card__info {
     display: flex;
     align-items: center;
     gap: var(--spacing-lg);
     margin-bottom: var(--spacing-lg);
     padding-top: var(--spacing-md);
     border-top: 1px solid var(--color-gray-200);
 }

 .menu-card__courses-count {
     display: flex;
     align-items: center;
     gap: var(--spacing-xs);
     font-size: var(--font-size-sm);
     color: var(--color-gray-700);
     font-weight: 500;
 }

 .menu-card__courses-count svg {
     color: var(--color-secondary-green);
 }

 .menu-card__link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-sm);
     width: 100%;
     padding: var(--spacing-md) var(--spacing-lg);
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .menu-card__link svg {
     transition: transform 0.3s ease;
 }

 .menu-card__link:hover svg {
     transform: translateX(4px);
 }

 /* Empty State */
 .menus-list__empty {
     text-align: center;
     padding: var(--spacing-4xl) var(--spacing-xl);
     max-width: 500px;
     margin: 0 auto;
 }

 .menus-list__empty svg {
     color: var(--color-gray-400);
     margin-bottom: var(--spacing-xl);
 }

 .menus-list__empty h3 {
     font-size: var(--font-size-2xl);
     font-weight: 700;
     color: var(--color-primary-green);
     margin: 0 0 var(--spacing-md) 0;
 }

 .menus-list__empty p {
     font-size: var(--font-size-base);
     color: var(--color-gray-700);
     line-height: 1.6;
     margin: 0 0 var(--spacing-2xl) 0;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .menus-grid {
         grid-template-columns: 1fr;
         gap: var(--spacing-xl);
     }

     .menu-card__image {
         height: 200px;
     }

     .menu-card__content {
         padding: var(--spacing-lg);
     }

     .menu-card__title {
         font-size: var(--font-size-lg);
     }
 }

 @media (max-width: 480px) {
     .menus-list {
         padding: var(--spacing-2xl) 0;
     }

     .menus-list__container {
         padding: 0 var(--spacing-md);
     }

     .menu-card__content {
         padding: var(--spacing-md);
     }
 }

 /* ==========================================================================
   END OF MENUS LIST PAGE CSS
   ========================================================================== */

 /*
  SUMMARY:
  This CSS file provides complete styling for the eateries section and directory pages,
  including:
  
  - Homepage eateries showcase section with asymmetric grid layout
  - Directory page hero section with background image animations
  - Interactive category cards with hover effects and glassmorphism
  - Beautiful CSS-only showcase cards with overlapping hover effects
  - Comprehensive responsive design for all device sizes
  - Touch device optimizations and accessibility considerations
  - Smooth animations and transitions throughout
  
  Key Features:
  - No JavaScript dependencies for reliable functionality
  - Consistent design language with the rest of the site
  - Performance-optimized animations and transitions
  - Accessibility-first approach with proper contrast and touch targets
  - Mobile-first responsive design philosophy
  - Comprehensive commenting for easy maintenance and updates
*/