.font-calligraphy,
.font-calligraphy-another,
.franklin-font,
.oswald-font {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700;
}


.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(126 126 126 / 60%), rgb(75 71 71 / 20%));
    z-index: 2;

    pointer-events: none;

}


:root {
    --cards-text-color: white;
    --cards-closed-size: 6rem;
    --animation-speed-normal: 0.8s;
    --animation-speed-fast: 0.25s;

    /* Modern Premium Tokens */
    --brand-red: #DC2626;
    --brand-red-light: #FEE2E2;
    --brand-gold: #CA8A04;
    --brand-dark: #111827;
    --brand-gray: #6b7280;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --bento-radius: 2rem;
}

/* Glassmorphism Utility */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-pill {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

.popular-chip {
    @apply px-4 py-1.5 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full border border-white/20 transition-all cursor-pointer text-white text-xs font-bold tracking-wide;
}

.popular-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}



/* Modern Swiper Layout for Vertical Cards */
.food-swiper .swiper-slide {
    height: auto !important;
}

.food-nav-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid #f3f4f6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-nav-btn:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.2);
    transform: translateY(-2px);
}

.food-nav-btn.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    background: #f9fafb;
    border-color: #f3f4f6;
}


.food-badge,
.verified-badge {
    position: absolute !important;
    top: 1.5rem !important;
    z-index: 10 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 1rem !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.15em !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s ease !important;
    box-shadow: none !important;
}

.food-badge {
    left: 1.5rem !important;
    right: auto !important;
    background: rgba(229, 62, 62, 0.85) !important;
    color: white !important;
}

.verified-badge {
    right: 1.5rem !important;
    left: auto !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

.cardfood:hover .food-badge {
    background: rgba(229, 62, 62, 1) !important;
    transform: translateY(-2px);
}

.cardfood:hover .verified-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px);
}


.cardfood .card__infos {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 2.5rem 2rem !important;
    pointer-events: none !important;
    background: none !important;
    height: 100% !important;
}

.loc-tag {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem !important;
}

.cardfood .card__name h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: white !important;
    line-height: 1.15 !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
}

.card-price-tag {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.price-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem !important;
}

.price-val {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: white !important;
    font-style: italic !important;
}

.food-swiper {
    padding: 3rem 0 !important;
    overflow: visible !important;
}


.food-culture-text {
    position: relative;
    z-index: 50 !important;
    overflow: visible !important;
}

/* Remove old pseudo-element hacks — .food-swiper-clip mask handles overflow now */
.food-culture-text::before,
.food-culture-text::after {
    display: none !important;
}

/* Navigation & CTA: Force top layer to prevent card overlap and fix cropping */
#food-section-cta,
#food-prev,
#food-next {
    position: relative;
    z-index: 60 !important;
}

/* Swiper Container: Ensure it stays behind the text but bleeds to the right */
.lg\:col-span-7 {
    position: relative;
    z-index: 10;
}

/* Luxury Fade Mask - Replaced by the more robust text-based mask above */







.sectionevent {
    position: relative;
    height: 450px;
    padding: 15px;
    padding: 0 70px;
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
}


.cardevent {
    position: relative;
    background: #fff;
    border-radius: 20px;
    margin: 20px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}


.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    z-index: 100;
}


.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;

    overflow: hidden;
    border-radius: 20px;
}


.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the square area */
}


.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}


.image-container:hover .hover-text {
    opacity: 1;
}


.mySwiper:not(.swiper-initialized) {
    opacity: 0;
}

.mySwiper {
    transition: opacity 0.5s ease;
}


.swiper-button-next,
.swiper-button-prev {
    opacity: 0.7;
    color: #7d2ae8;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1;
    color: #7d2ae8;
}


.swiper-pagination {
    position: absolute;
}

.swiper-pagination-bullet {
    height: 7px;
    width: 26px;
    border-radius: 25px;
    background: #7d2ae8;
}


@media (max-width: 768px) {
    .sectionevent {
        padding: 15px;
    }

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

.swiper-pagination {
    display: none;
}

#food-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    bottom: auto;
    margin-top: 24px;
}

#food-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    opacity: 1;
    transition: background 0.3s, width 0.3s;
}

#food-pagination .swiper-pagination-bullet-active {
    background: #ef4444;
    width: 24px;
    border-radius: 25px;
}




/* --- The Stacked Chronicles (Testimonials) --- */
.testimonials-section {
    background-color: #FCFAFA; /* Silk Bone */
}

.editorial-story {
    width: 100%;
    position: relative;
}

.story-image-vessel {
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-image-vessel img {
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
}

/* Luxury Quote Typography */
.editorial-story blockquote p {
    font-family: 'Playfair Display', serif; /* Falling back to Serif if not loaded */
    font-style: italic;
}.editorial-story .explorer-avatar {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Alternating rhythmic spacing */
.editorial-story:nth-child(even) {
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .editorial-story {
        text-align: center;
        gap: 2rem !important;
    }
    
    .editorial-story .flex-col {
        align-items: center;
    }
    
    .editorial-story blockquote p {
        font-size: 1.5rem; /* text-2xl scaled */
        line-height: 1.25;
    }
    
    .editorial-story .pt-6 {
        justify-content: center;
    }
}

/* --- The Silk Pavilion --- */
.pavilion-banner {
    aspect-ratio: 25 / 8;
}

/* --- The Silk Foundation (Footer) --- */
.vessel-social {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-link-hover {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pavilion-stat-card {
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.pavilion-icon-vessel {
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    background-image: radial-gradient(circle at 30% 30%, #fff 0%, #f9fafb 100%);
}

.pavilion-banner {
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.15);
}

.pavilion-banner img {
    filter: brightness(0.6) contrast(1.1);
}

.pavilion-banner #banner-h1 {
    text-shadow: 0 20px 40px rgba(239, 68, 68, 0.3);
}

@media (max-width: 1024px) {
    .pavilion-banner .aspect-\[21\/9\], 
    .pavilion-banner .lg\:aspect-\[25\/8\] {
        aspect-ratio: 16/10;
    }
}

    .testi-nav-wrapper {
        display: none;
    }
}


.curve-background {
    background-image: url('../assets/images/Curve-2.svg');
    background-size: cover;
    background-position: bottom;
    height: 60vh;
}

.carousel {
    margin: 0 auto;
    padding: 20px 0;

    overflow: hidden;
    display: flex;
}

.cardOther {
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
}




.groupcarousel {
    display: flex;
    gap: 20px;
    padding-right: 20px;

    will-change: transform;
    animation: scrolling-left 10s linear infinite;
}


@keyframes scrolling-left {
    0% {
        transform: translateX(0);

    }

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

    }
}

.cardOther img {
    width: 20vw;
    height: 20vh;
}

.widthofscreen {
    width: 98.8vw;
}

.carousel:hover .groupcarousel {
    animation-play-state: paused;
}

.small-icon {
    width: 25px;
}

.custom-section-color {
    background-color: #fff8f8;
}


/* --- The Silk Arrival (Hero Redesign) --- */
/* ============================================================
   THE CINEMATIC GLASSHOUSE
   A minimalist, ultra-luxurious centered hero layout.
   ============================================================ */

.glasshouse-hero {
    position: relative;
    /* Hero handles full height via HTML classes (h-screen) */
}

/* Glasshouse Bottom Search Bar */
.glasshouse-search-bar {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.glasshouse-search-bar:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .glasshouse-search-bar {
        flex-direction: column !important;
        border-radius: 2rem !important;
        padding: 0.5rem !important;
        gap: 0.25rem;
    }
    
    .glasshouse-divider {
        width: 80% !important;
        height: 1px !important;
        margin: 0 auto;
    }
    
    .glasshouse-field {
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem !important;
    }
    
    #hero-main-search-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.5rem;
        height: 3.5rem !important;
    }

}

.glasshouse-field {
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    transition: all 0.3s ease;
}

.glasshouse-field:hover {
    background: rgba(255, 255, 255, 0.15);
}

.glasshouse-divider {
    width: 1px;
    height: 3rem;
    background: rgba(255, 255, 255, 0.2);
}

.glasshouse-label {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
}

.glasshouse-value {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.glasshouse-action-btn:hover {
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

/* Hero handled by global navbar-scrolled logic */
#hero-section {
    position: relative;
    z-index: 1001;
    overflow: hidden !important;
}

body.search-active #hero-bg-image {
    filter: blur(12px) brightness(0.4);
    transform: scale(1.08);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

body.search-active header .overlay {
    filter: brightness(0.3);
    transition: all 0.8s ease;
}

body.search-active header .space-y-4 {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(-30px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

#search-scrim {
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 20, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

#search-scrim.active {
    opacity: 1;
    pointer-events: auto;
}

.search-field-group {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    padding: 0.75rem 1.5rem;
    border-radius: 5rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    position: relative;
    text-align: left;
    /* Ensure text is always left-aligned */
}

.search-field-group:hover:not(.active) {
    background: rgba(255, 255, 255, 0.4);
}

.search-field-group.active {
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
    transform: scale(1.03);
}

.search-field-divider {
    width: 1px;
    height: 2rem;
    background: rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s ease;
}

.search-field-group.active+.search-field-divider,
.search-field-divider:has(+ .search-field-group.active) {
    opacity: 0;
}

.search-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-primary) !important;
    margin-bottom: 2px;
}

.search-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 180px;
}

.search-field-active .search-label,
.search-field-active .search-value {
    color: var(--brand-red) !important;
    font-weight: 700;
}

/* Ensure active field text is always dark */
.search-field-group.active .search-label {
    color: var(--brand-red) !important;
}

.search-field-group.active .search-value {
    color: var(--dark-gray) !important;
}

#main-search-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--brand-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
}

#main-search-btn:hover {
    transform: scale(1.1) rotate(5deg);
    background: var(--brand-red-hover);
}


[id^="dropdown-"] {
    position: absolute;
    top: calc(100% + 1rem);
    background: #ffffff;
    border-radius: 2.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    width: 400px;
    max-width: 90vw;
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
    z-index: 1002;
    color: var(--text-primary) !important;
}

#dropdown-loc {
    left: 0;
}

#dropdown-guests {
    right: 0;
}

@media (max-width: 640px) {
    [id^="dropdown-"] {
        width: calc(100vw - 2rem);
        left: 50% !important;
        transform: translateX(-50%) translateY(15px) scale(0.98);
    }

    [id^="dropdown-"].show {
        transform: translateX(-50%) translateY(0) scale(1);
    }


    .search-glass-pill {
        flex-direction: column;
        border-radius: 2rem;
        padding: 0.5rem !important;
        gap: 0;
    }

    .search-field-group {
        width: 100% !important;
        flex: none !important;
        border-radius: 1.5rem !important;
    }

    .search-field-divider {
        width: 80%;
        height: 1px;
        background: rgba(0, 0, 0, 0.06);
        margin: 0 auto;
    }

    #main-search-btn {
        width: 100%;
        height: 3rem;
        border-radius: 1.5rem !important;
        margin: 0.5rem 0 0 0;
    }
}

[id^="dropdown-"] * {
    color: inherit;
}

[id^="dropdown-"] .text-gray-400 {
    color: var(--text-secondary) !important;
}

[id^="dropdown-"] .font-bold {
    color: var(--dark-gray) !important;
}

[id^="dropdown-"].show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


.loc-option {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem !important;
    border-radius: 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.loc-option::before {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #cbd5e1;
}

.loc-option:hover {
    background: var(--bg-soft) !important;
    color: var(--brand-red) !important;
    transform: translateX(5px);
}

.loc-option:hover::before {
    color: var(--brand-red);
}


.air-datepicker {
    --adp-accent-color: var(--brand-red) !important;
    --adp-color-current-date: var(--brand-red) !important;
    --adp-border-radius: 2.5rem !important;
    border: none !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25) !important;
    padding: 2rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
}


#dropdown-loc {
    animation: fadeInScale 0.2s ease-out;
    transform-origin: top left;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f9fafb;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

#dropdown-guests {
    animation: fadeInScale 0.2s ease-out;
    transform-origin: top right;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

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

.loc-option:hover {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
}

#search-loc-btn,
#search-guests-btn,
#search-date-input {
    outline: none !important;
    box-shadow: none !important;
}

#search-loc-btn:focus,
#search-guests-btn:focus,
#search-date-input:focus {
    outline: none !important;
    box-shadow: none !important;
}


.litepicker {
    font-family: 'Poppins', sans-serif !important;
    border-radius: 2rem !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    padding: 2rem !important;
    background: #fff !important;
    z-index: 99999 !important;
}

.litepicker .container__months {
    display: flex !important;
    justify-content: center !important;
}

.litepicker .month-item {
    width: 320px !important;
    background: transparent !important;
}

.litepicker .month-item-header {
    display: flex !important;
    justify-content: center !important;
    padding: 0 0 2.5rem 0 !important;

    position: relative !important;
}

.litepicker .month-item-name,
.litepicker .month-item-year {
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    color: #111827 !important;
}


.litepicker .container__months .month-item-header select {
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #111827 !important;
    cursor: pointer !important;
    padding: 0 5px !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.litepicker .container__months .month-item-header select:hover {
    color: #ef4444 !important;
}


.litepicker .button-previous-month,
.litepicker .button-next-month {
    position: absolute !important;
    top: 2.2rem !important;

    width: 44px !important;
    height: 44px !important;
    background: #f9fafb !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    color: #4b5563 !important;
    fill: currentColor !important;
    border: 1px solid #e5e7eb !important;
    z-index: 100 !important;
    cursor: pointer !important;
}

.litepicker .button-previous-month {
    left: 2.5rem !important;
}

.litepicker .button-next-month {
    right: 2.5rem !important;
}

.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
    background: #ef4444 !important;
    color: #fff !important;
    fill: #fff !important;
    border-color: #ef4444 !important;
}


.litepicker .month-item-weekdays-row,
.litepicker .container__days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center !important;
    width: 100% !important;
}

.litepicker .month-item-weekdays-row>div {
    color: #9ca3af !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    padding-bottom: 1.2rem !important;
}

.litepicker .container__days .day-item {
    height: 42px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin: 3px 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    color: #374151 !important;
    font-weight: 500 !important;
    border: 2px solid transparent !important;
}


.litepicker .container__days .day-item.is-today {
    color: #ef4444 !important;
    box-shadow: inset 0 0 0 2px #ef4444 !important;
    font-weight: 700 !important;
}


.litepicker .container__days .day-item.is-selected,
.litepicker .day-item.is-selected {
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.4) !important;
    transform: scale(1.1) !important;
    z-index: 2 !important;
}

.litepicker .container__days .day-item:hover:not(.is-selected) {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}


.litepicker .button-previous-month,
.litepicker .button-next-month {
    position: absolute !important;
    top: 2rem !important;
    width: 44px !important;
    height: 44px !important;
    background: #f9fafb !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    color: #4b5563 !important;
    fill: currentColor !important;
    border: 1px solid #e5e7eb !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.litepicker .button-previous-month {
    left: 1.5rem !important;
}

.litepicker .button-next-month {
    right: 1.5rem !important;
}

.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
    background: #ef4444 !important;
    color: #fff !important;
    fill: #fff !important;
    border-color: #ef4444 !important;
}

.litepicker .button-previous-month svg,
.litepicker .button-next-month svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}


.litepicker .container__months .month-item:first-child .button-next-month,
.litepicker .container__months .month-item:last-child .button-previous-month {
    display: none !important;
}

/* 
   Universal Category Grid 
   Handles 1 to 100+ items gracefully without external libraries.
   Centered, wrapping, and responsive.
*/
/* Dynamic Category Grid */
#cms-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    width: 100%;
    transition: all 0.5s ease;
}

@media (max-width: 640px) {
    #cms-categories-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1.5rem;
        gap: 1rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #cms-categories-container::-webkit-scrollbar {
        display: none;
    }

    .atlas-card, .category-card {
        flex: 0 0 140px;
        scroll-snap-align: center;
    }
}

/* ============================================================
   THE SILK ATLAS (Categories Redesign)
   ============================================================ */

.atlas-card, .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(25px) saturate(140%);
    -webkit-backdrop-filter: blur(25px) saturate(140%);
    padding: 3rem 1.5rem;
    border-radius: 3rem;
    transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
    text-decoration: none !important;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    min-height: 220px;
    box-shadow: 
        0 10px 40px -10px rgba(0, 0, 0, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.atlas-card::after, .category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(220, 38, 38, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.atlas-card:hover, .category-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
}

.atlas-card:hover::after, .category-card:hover::after {
    opacity: 1;
}

.atlas-icon-box, .category-card-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.atlas-icon-box i, .category-card-icon i {
    font-size: 1.8rem;
    color: #111827;
    transition: all 0.5s ease;
}

.atlas-card:hover .atlas-icon-box, 
.category-card:hover .category-card-icon {
    background: #DC2626;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(220, 38, 38, 0.25);
}

.atlas-card:hover .atlas-icon-box i,
.category-card:hover .category-card-icon i {
    color: white;
}

.atlas-title, .category-card-title {
    font-size: 0.75rem;
    font-weight: 900;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.3;
    padding: 0 0.25rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.atlas-card:hover .atlas-title,
.category-card:hover .category-card-title {
    color: #DC2626;
    letter-spacing: 0.25em;
}

.atlas-indicator, .category-card-indicator {
    position: absolute;
    bottom: 2rem;
    width: 0px;
    height: 2px;
    background: #DC2626;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    border-radius: 10px;
}

.atlas-card:hover .atlas-indicator,
.category-card:hover .category-card-indicator {
    width: 30px;
}

/* Love Button Inline - Repositioned below image */
.love-button-inline {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f3f4f6;
    cursor: pointer;
    flex-shrink: 0;
}

.love-button-inline:hover {
    transform: scale(1.1) rotate(5deg);
    background: #fff;
    color: #ef4444;
    border-color: #fee2e2;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.love-button-inline.active {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}

.love-button-inline .heartIcon {
    transition: transform 0.3s ease;
}

.love-button-inline:active .heartIcon {
    transform: scale(0.8);
}

/* Compact Tag Variant */
.tag-grid-xs {
    padding: 2px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.05em;
    font-weight: 800;
}

/* Editorial Silk Stamp */
.silk-stamp {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    padding: 2px 10px !important;
    border-radius: 2px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.35em !important;
    background: transparent !important;
    color: #ef4444 !important;
    border: 0.5px solid currentColor !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
    margin-bottom: 0.75rem !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.silk-stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.05;
    z-index: -1;
}



.map-toggle-btn {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 1rem 1.75rem;
    border-radius: 5rem;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-toggle-btn:hover {
    transform: translateX(-50%) scale(1.05);
    background: #111827;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.map-toggle-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

/* Hide toggle when footer is visible or near bottom (optional UX polish) */
@media (max-height: 600px) {
    .map-toggle-btn {
        bottom: 20px;
        padding: 0.75rem 1.25rem;
    }
}


.verified-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.verified-badge i {
    color: #ef4444;
    font-size: 0.9rem;
}

.verified-badge span {
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cardfood:hover .verified-badge {
    transform: translateY(-3px);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}

/* ============================================
   UTILITY CLASSES — Food Culture Section Layout
   Part C: replaces inline style="" attributes in home.html
   ============================================ */

/* food-culture-layout, text, cards — defined in Food Culture Section block above */



.parallax-container {
    perspective: 1000px;
}

.parallax-overlay-refined {
    background: linear-gradient(to right, rgba(31, 41, 55, 0.85), rgba(31, 41, 55, 0.4));
    backdrop-filter: saturate(1.2);
}

.parallax-title-enhanced {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.location-badge-refined {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1.5rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.location-badge-refined:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.parallax-card-refined {
    border-radius: 3rem !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.45), 0 18px 36px -18px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.parallax-card-refined:hover {
    transform: scale(1.02) translateY(-10px);
}

.content-box-elegant {
    background: #ffffff;
    border-radius: 3rem;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    height: 16rem;
    width: 100%;
    transition: all 0.5s ease;
}

.content-box-elegant:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.15);
}

/* ── Premium View All Card Redesign (Refined for Clarity) ───────────────── */

.lux-view-all-container {
    background: #020617;
    border-radius: 2.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) contrast(1.1);
    transform: scale(1.05);
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-container:hover .lux-view-all-bg {
    transform: scale(1.15);
}

.lux-view-all-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.1) 0%, transparent 70%);
}

.lux-view-all-content {
    position: relative;
    z-index: 4;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Iconic Circular CTA */
.lux-view-all-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #020617;
    margin-bottom: 0.5rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}

.lux-view-all-container:hover .lux-view-all-circle {
    background: var(--brand-red);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.4);
}

.lux-view-all-circle i {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-container:hover .lux-view-all-circle i {
    transform: rotate(-45deg);
}

.lux-view-all-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lux-view-all-label {
    color: var(--brand-gold);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4em;
}

.lux-view-all-main {
    font-family: var(--font-elegant);
    font-size: 2.25rem;
    font-weight: 900;
    color: white;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.verified-badge i {
    color: #ef4444;
    font-size: 0.9rem;
}

.verified-badge span {
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cardfood:hover .verified-badge {
    transform: translateY(-3px);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}

/* ============================================
   UTILITY CLASSES — Food Culture Section Layout
   Part C: replaces inline style="" attributes in home.html
   ============================================ */

/* food-culture-layout, text, cards — defined in Food Culture Section block above */



/* ==========================================================================
   THE SILK GALLERY: PREMIUM LIGHT-MODE REDESIGN (V7.0)
   Aesthetic: Airy, Sophisticated, Minimalist
   Inspiration: Kinfolk / High-end Editorial
   ========================================================================== */
/* ==========================================================================
   THE SILK GALLERY: SIGNATURE RECOMMENDATION (V7.1 - Suggestion Focus)
   Aesthetic: Floating Softness, Wide Spacing, Curator's Voice
   ========================================================================== */
.silk-section {
    background-color: #FDFCFB;
    background-image: radial-gradient(circle at 40% 50%, rgba(253, 252, 251, 0) 0%, #FDFCFB 100%);
}

.silk-spotlight {
    background: radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Discovery Seal (Trust Signal) ── */
.discovery-seal {
    animation: seal-rotate 20s linear infinite;
}

@keyframes seal-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── The Silk Vessel (Floating Image) ── */
.silk-vessel {
    position: relative;
    width: 100%;
    max-width: 520px; /* Limited biggest size */
    z-index: 5;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.vessel-outer {
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.vessel-inner {
    aspect-ratio: 4/5;
    background: #f8fafc;
}

.silk-vessel:hover .vessel-outer {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.12);
}

/* ── Typography & Suggestion Feeling ── */
.silk-editorial {
    z-index: 20;
}

/* ── Editorial Card (The Text Card) ── */
.editorial-card {
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.editorial-card:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 70px 140px -40px rgba(0, 0, 0, 0.12);
}

/* ── Marginalia (Metadata) ── */
.silk-marginalia {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.silk-loc {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Typography & Suggestion Feeling ── */

/* ── Signature CTA (Conversion Focused) ── */
.silk-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2.5rem;
    background: #111827;
    color: white;
    border-radius: 100px;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.silk-btn-text {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.silk-btn-icon {
    font-size: 0.8rem;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.silk-btn-hover {
    position: absolute;
    inset: 0;
    background: #ef4444;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.silk-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2);
}

.silk-button:hover .silk-btn-hover {
    transform: translateY(0);
}

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

.silk-button:hover .silk-btn-text {
    transform: translateX(5px);
}

.silk-button:hover .silk-btn-icon {
    transform: translateX(10px);
}

/* ── Global Reveal Transitions ── */

@media (max-width: 1024px) {
    .silk-section {
        min-height: auto;
        padding: 8rem 0;
        margin: 6rem 0;
    }


    .silk-vessel-container {
        margin-bottom: 4rem;
    }

    .discovery-seal {
        display: none !important;
    }
}


/* ── Premium View All Card Redesign (Refined for Clarity) ───────────────── */

.lux-view-all-container {
    background: #020617;
    border-radius: 2.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) contrast(1.1);
    transform: scale(1.05);
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-container:hover .lux-view-all-bg {
    transform: scale(1.15);
}

.lux-view-all-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.1) 0%, transparent 70%);
}

.lux-view-all-content {
    position: relative;
    z-index: 4;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Iconic Circular CTA */
.lux-view-all-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #020617;
    margin-bottom: 0.5rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}

.lux-view-all-container:hover .lux-view-all-circle {
    background: var(--brand-red);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.4);
}

.lux-view-all-circle i {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-view-all-container:hover .lux-view-all-circle i {
    transform: rotate(-45deg);
}

.lux-view-all-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lux-view-all-label {
    color: var(--brand-gold);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4em;
}

.lux-view-all-main {
    font-family: var(--font-elegant);
    font-size: 2.25rem;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Magnetic Hover state handled via JS */
.lux-view-all-container:hover {
    transform: scale(1.02);
}

/* -------------------------------------------------------------------------- */
/* RSS ARIA V5.0: ETHEREAL EDITORIAL (Clean & Minimal Light Mode)             */
/* -------------------------------------------------------------------------- */
.aria-rss-section {
    background-color: var(--aria-bg);
    padding: 2.5rem 0;
    /* Ultra-compact */
    position: relative;
    overflow: hidden;
}

/* Subtle Architectural Grain */
.aria-rss-section::before {
    content: '';
    position: absolute;
    inset: 0;
    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%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: 1;
}

.aria-label-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.aria-kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6em;
    color: #000;
}

.aria-live-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.aria-live-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    animation: aria-pulse 2s infinite;
}


/* Header standardized with utility classes */

/* Feed Deck: Innovative Navigator */
.aria-feed-deck-wrapper {
    position: relative;
    padding-bottom: 0.5rem;
}

.aria-feed-deck {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.5rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.aria-feed-deck::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.aria-source-card {
    background: white;
    padding: 0.4rem 1.2rem;
    /* Even smaller */
    border-radius: 100px;
    border: 1px solid var(--aria-border);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.01);
}

.aria-source-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.aria-source-card.active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

.card-dot {
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.active .card-dot {
    background: #FF5F5F;
    box-shadow: 0 0 10px #FF5F5F;
}

.card-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: capitalize;
}

/* Grid Architecture */
.aria-rss-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    /* Split: Left (Featured) vs Right (List) */
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .aria-rss-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Aria Card Base */
.aria-card {
    position: relative;
    background: transparent;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    transform: translateY(40px);
}

.aria-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured Story: Large 6-column Layout */
.aria-card-featured {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    /* Back to vertical for the left column */
    gap: 1.5rem;
}

.aria-featured-visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.aria-featured-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.aria-card:hover .aria-featured-visual img {
    transform: scale(1.05);
}

.aria-featured-content {
    grid-column: span 5;
}

.aria-card-meta {
    font-family: ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: #FF5F5F;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.meta-line {
    width: 2rem;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.aria-card-featured .aria-card-title {
    font-size: 1.5rem;
    /* Slightly larger than standard but compact */
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
}

.aria-card-featured .aria-card-excerpt {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Standard Secondary Cards */
.aria-grid-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 720px; /* Aligns roughly with the featured card height */
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

@media (max-width: 768px) {
    .aria-grid-right {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}

.aria-grid-right::-webkit-scrollbar {
    width: 4px;
}

.aria-grid-right::-webkit-scrollbar-track {
    background: transparent;
}

.aria-grid-right::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.aria-grid-right::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.aria-card-standard {
    flex-shrink: 0;
}

.aria-card-standard {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.aria-card-standard:hover {
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.aria-standard-visual {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #000;
}

.aria-standard-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.aria-card-standard:hover .aria-standard-visual img {
    transform: scale(1.1);
}

.aria-card-standard h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #334155;
    margin: 0;
}

.aria-card-standard h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

/* Load More Action */
.aria-action-link {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    text-decoration: none !important;
}

.aria-action-text {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: #94a3b8;
    transition: color 0.4s ease;
}

.aria-action-line {
    width: 6rem;
    height: 1px;
    background: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.aria-action-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #FF5F5F;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.aria-action-link:hover .aria-action-text {
    color: #0f172a;
}

.aria-action-link:hover .aria-action-line::after {
    transform: translateX(0);
}

.aria-action-icon {
    font-size: 0.8rem;
    color: #FF5F5F;
    transition: transform 0.4s ease;
}

@media (max-width: 768px) {
    .aria-rss-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .aria-featured-visual {
        aspect-ratio: 16/9;
    }

    .aria-card-featured .aria-card-title {
        font-size: 1.4rem;
    }
}

.aria-footer-action {
    margin-top: 5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .aria-card-standard {
        grid-column: span 6;
    }

    .aria-card-featured {
        gap: 3rem;
    }

    .aria-featured-visual {
        grid-column: span 12;
    }

    .aria-featured-content {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .aria-rss-grid {
        gap: 4rem;
    }

    .aria-card-standard {
        grid-column: span 12;
    }

    .aria-title {
        font-size: 3.5rem;
    }

    .aria-card-title {
        font-size: 2.25rem;
    }
}

/* ============================================================ */
/* MOBILE EDITORIAL POLISH (V5.1)                                */
/* ============================================================ */
@media (max-width: 768px) {
    /* 1. Global Section Rhythm */
    section.atlas-section, 
    section.food-section, 
    section.aria-rss-section, 
    section.silk-section, 
    section.testimonials-section, 
    section.features-section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. Hero cinematic scale */

    /* 3. Glasshouse Search Bar (Vertical Stack) */
    .glasshouse-search-bar {
        flex-direction: column !important;
        border-radius: 2rem !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .glasshouse-divider {
        width: 60% !important;
        height: 1px !important;
        margin: 0.25rem auto !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .glasshouse-field {
        width: 100% !important;
        text-align: center !important;
        padding: 0.8rem 1rem !important;
    }

    .field-label {
        font-size: 0.6rem !important;
    }

    .field-val {
        font-size: 0.85rem !important;
    }
    
    #hero-main-search-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
        height: 4rem !important;
        border-radius: 1.5rem !important;
    }

    /* 4. Silk Atlas (Categories) Fixes */
    .atlas-icon-box {
        width: 70px !important;
        height: 70px !important;
        border-radius: 2rem !important;
    }

    .atlas-icon-box i {
        font-size: 1.5rem !important;
    }

    .atlas-title {
        font-size: 0.65rem !important;
        letter-spacing: 0.15em !important;
    }

    /* 5. Food Swiper Navigation Polish */
    .food-nav-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* 6. Aria RSS Split Contrast Mobile behavior */
    .aria-grid-right {
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    .aria-card-featured .aria-card-title {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
    }

    .aria-card-standard h3 {
        font-size: 1.1rem !important;
    }

    /* 7. Features Pavilion Banner (MOBILE REDESIGN) */
    .pavilion-banner > div:first-child {
        aspect-ratio: 4/5 !important; /* Premium Editorial Vertical Ratio */
        height: auto !important;
        min-height: 520px !important; /* Significant vertical presence */
    }

    .pavilion-banner .absolute.inset-y-0 {
        padding: 4rem 2.5rem !important;
        background: linear-gradient(to top, 
            rgba(17, 24, 39, 1) 0%, 
            rgba(17, 24, 39, 0.8) 40%, 
            rgba(17, 24, 39, 0) 100%
        ) !important;
        justify-content: flex-end !important;
        z-index: 30 !important;
    }

    /* Cinematic Text Layers */
    #banner-h1 {
        font-size: clamp(5rem, 20vw, 7rem) !important; /* Dynamic massive scale */
        line-height: 0.8 !important;
        letter-spacing: -0.06em !important;
        margin-bottom: 0.5rem !important;
        background: linear-gradient(180deg, #FF5F5F, #b91d1d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #banner-h2 {
        font-size: 2.25rem !important;
        letter-spacing: -0.03em !important;
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
        color: white !important;
        font-weight: 900 !important;
    }

    #banner-h3 {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-style: normal !important;
        font-weight: 400 !important;
        border-left: 2px solid #FF5F5F;
        padding-left: 1.25rem !important;
    }

    /* Kicker scale */
    .pavilion-banner .inline-flex.items-center.gap-3.mb-6 {
        margin-bottom: 2rem !important;
    }






    /* 8. Trust Ensemble Scale */
    .features-section img[data-icon] {
        height: 2.25rem !important;
    }
}