/* Foodit v1 - Public Stylesheet */
:root {
    --color-bg-food: #F4ECE6;
    --color-bg-coffee: #3D2C2A;
    --color-bg-cold-drink: #E0F7FA;
    --color-primary-dark: #3E2723;
    --color-primary-medium: #6D4C41;
    --color-primary-light: #BDBDBD;
    --color-text-light: #F4ECE6;
    --color-text-dark: #3D2C2A;
    --color-accent: #FFA726;
    --color-accent-dark: #FB8C00;
    --color-white: #FFFFFF;
    --color-error: #ef4444;
    --font-primary: 'Yekan', 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
    --logo-blur-image: url('/uploads/ribar.png');
    --bg-overlay-opacity: .85;
    --bg-overlay-blur: 34px;
    --bg-overlay-saturate: 1.08;
    --bg-before-gradient: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 40%, rgba(255, 255, 255, .78) 75%, rgba(255, 255, 255, .7) 100%);
    --bg-after-overlay: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%);
    --bg-surface-color: rgba(255, 255, 255, .9);
    --bg-surface-blur: 24px;
    --bg-surface-saturate: 1.05;
    --bg-surface-overlay-opacity: .92;
    --bg-surface-noise-opacity: .2;
    --bg-noise-blend-mode: soft-light;
    --header-height-mobile: 64px;
    --header-height-desktop: 80px;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-primary);
    -webkit-transition: background-color .7s ease-in-out;
    -moz-transition: background-color .7s ease-in-out;
    -o-transition: background-color .7s ease-in-out;
    transition: background-color .7s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--c-bg, var(--color-bg-food));
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100vw;
    -ms-scroll-chaining: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
}

#app-container,
#view-container,
main {
    overflow-x: hidden;
    max-width: 100%;
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}

.logo-blur-bg {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-surface-color, rgba(255, 255, 255, .96));
    -webkit-backdrop-filter: blur(var(--bg-surface-blur, 24px)) saturate(var(--bg-surface-saturate, 1.05));
    -moz-backdrop-filter: blur(var(--bg-surface-blur, 24px)) saturate(var(--bg-surface-saturate, 1.05));
    -o-backdrop-filter: blur(var(--bg-surface-blur, 24px)) saturate(var(--bg-surface-saturate, 1.05));
    backdrop-filter: blur(var(--bg-surface-blur, 24px)) saturate(var(--bg-surface-saturate, 1.05));
    -webkit-box-shadow: 0 18px 46px -32px rgba(15, 23, 42, .45);
    -moz-box-shadow: 0 18px 46px -32px rgba(15, 23, 42, .45);
    box-shadow: 0 18px 46px -32px rgba(15, 23, 42, .45);
}

.logo-blur-bg::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 55%, rgba(255, 255, 255, .88) 100%);
    -webkit-filter: blur(calc(var(--bg-surface-blur, 24px) + 4px)) saturate(var(--bg-surface-saturate, 1.05));
    -moz-filter: blur(calc(var(--bg-surface-blur, 24px) + 4px)) saturate(var(--bg-surface-saturate, 1.05));
    -o-filter: blur(calc(var(--bg-surface-blur, 24px) + 4px)) saturate(var(--bg-surface-saturate, 1.05));
    filter: blur(calc(var(--bg-surface-blur, 24px) + 4px)) saturate(var(--bg-surface-saturate, 1.05));
    opacity: var(--bg-surface-overlay-opacity, .96);
    z-index: 0;
    pointer-events: none;
}

.logo-blur-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--logo-blur-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(120px, 26vw, 220px);
    opacity: var(--bg-surface-noise-opacity, .08);
    -webkit-filter: blur(max(calc(var(--bg-surface-blur, 24px) + 6px), 0px)) saturate(0.6);
    -moz-filter: blur(max(calc(var(--bg-surface-blur, 24px) + 6px), 0px)) saturate(0.6);
    -o-filter: blur(max(calc(var(--bg-surface-blur, 24px) + 6px), 0px)) saturate(0.6);
    filter: blur(max(calc(var(--bg-surface-blur, 24px) + 6px), 0px)) saturate(0.6);
    mix-blend-mode: var(--bg-noise-blend-mode, overlay);
    z-index: 0;
    pointer-events: none;
}

.logo-blur-bg > * {
    position: relative;
    z-index: 1;
}

#app-container::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--bg-before-gradient);
    -webkit-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    -moz-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    -o-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    opacity: var(--bg-opacity, 0);
    -webkit-transition: opacity .7s ease-in-out;
    -moz-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
    transition: opacity .7s ease-in-out;
}

#app-container::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--bg-after-overlay), var(--logo-blur-image);
    background-repeat: no-repeat, no-repeat;
    background-position: top right, center;
    background-size: clamp(220px, 42vw, 520px), clamp(160px, 30vw, 280px);
    -webkit-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    -moz-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    -o-filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    filter: blur(var(--bg-overlay-blur, 34px)) saturate(var(--bg-overlay-saturate, 1.08));
    mix-blend-mode: soft-light;
    opacity: var(--bg-opacity, 0);
    -webkit-transition: opacity .7s ease-in-out;
    -moz-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
    transition: opacity .7s ease-in-out;
    pointer-events: none;
}

#home-view-content {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    body:not(.circular-menu-active) #home-view-content {
        padding-inline-end: clamp(.5rem, 1vw, 1rem);
        scrollbar-gutter: stable both-edges;
    }
}

.home-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 4vw, 3.5rem);
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 5vw, 3.25rem) clamp(4.5rem, 9vw, 6rem);
}

.hero-section {
    position: relative;
    border-radius: clamp(1.75rem, 4vw, 2.75rem);
    padding: clamp(1.75rem, 5vw, 3rem);
    overflow: hidden;
    background: -webkit-linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.55));
    background: -moz-linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.55));
    background: -o-linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.55));
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.55));
    -webkit-box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.65);
    -moz-box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.65);
    box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.65);
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
    color: inherit;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Hero wrapper containers - prevent overflow */
.shop-hero, .delivery-hero, .digital-menu-hero, .booking-hero,
.home-hero-slider {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Swiper container fixes - full width */
.swiper-container, .swiper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swiper-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swiper-slide {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================
   PRE-ORDER SECTION - MODERN DESIGN
   Responsive design for mobile and desktop
   =================================== */

/* Pre-order container */
#preorder-items {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pre-order item cards - mobile optimized */
#preorder-list > div {
    transition: all 0.2s ease;
}

#preorder-list > div:active {
    transform: scale(0.98);
}

/* Touch-friendly buttons */
#add-preorder-btn {
    min-height: 48px;
    touch-action: manipulation;
}

/* Mobile: Stack stats vertically on very small screens */
@media (max-width: 640px) {
    #add-preorder-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet and up: Enhanced hover effects */
@media (min-width: 768px) {
    #preorder-list > div:hover {
        transform: translateX(-4px);
        box-shadow: 0 8px 16px -4px rgba(249, 115, 22, 0.2);
    }
}

/* ===================================
   UNIFIED PAGE STRUCTURE (Shop, Delivery, Digital Menu, Booking)
   All 4 pages must have identical layout structure
   =================================== */

/* Global container constraints */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

#app-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

#view-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Desktop header - prevent overflow */
#global-nav {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 1024px) {
    #global-nav {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Page containers - unified structure */
.shop-page,
.delivery-page,
.digital-menu-page,
.booking-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove gap from first container inside page wrappers */
.shop-page > .container:first-child,
.delivery-page > .container:first-child,
.digital-menu-page > .container:first-child,
.booking-page > .container:first-child {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Hero section wrappers - 100% width edge-to-edge, no horizontal gaps */
.shop-hero,
.delivery-hero,
.digital-menu-hero,
.booking-hero {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Hero swiper wrapper - full width */
.hero-swiper-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hero sections themselves - full width edge-to-edge, gradient backgrounds */
.shop-hero .hero-section,
.delivery-hero .hero-section,
.digital-menu-hero .hero-section,
.booking-hero .hero-section {
    margin: 0 !important;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 6vw, 4rem) !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(480px, 65vh, 640px) !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    color: white;
}

.shop-hero .hero-section::before,
.delivery-hero .hero-section::before,
.digital-menu-hero .hero-section::before,
.booking-hero .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .shop-hero,
    .delivery-hero,
    .digital-menu-hero,
    .booking-hero {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .shop-hero .hero-section,
    .delivery-hero .hero-section,
    .digital-menu-hero .hero-section,
    .booking-hero .hero-section {
        padding: clamp(4.5rem, 8vw, 6rem) clamp(3rem, 8vw, 6rem) !important;
        min-height: 560px !important;
    }
}

/* Content sections - standardized spacing, account for absolute hero */
.shop-page section:not(.shop-hero),
.delivery-page section:not(.delivery-hero),
.digital-menu-page section:not(.digital-menu-hero),
.booking-page section:not(.booking-hero) {
    padding-left: clamp(1rem, 4vw, 2.5rem) !important;
    padding-right: clamp(1rem, 4vw, 2.5rem) !important;
    margin-top: 0 !important;
}

/* First content section after hero needs extra top spacing */
.shop-page .shop-hero + section,
.delivery-page .delivery-hero + section,
.digital-menu-page .digital-menu-hero + section,
.booking-page .booking-hero + section {
    margin-top: clamp(2.5rem, 6vw, 4rem) !important;
}

@media (min-width: 768px) {
    .shop-page .shop-hero + section,
    .delivery-page .delivery-hero + section,
    .digital-menu-page .digital-menu-hero + section,
    .booking-page .booking-hero + section {
        margin-top: clamp(3rem, 6vw, 4.5rem) !important;
    }
}

@media (min-width: 1024px) {
    .shop-page section:not(.shop-hero),
    .delivery-page section:not(.delivery-hero),
    .digital-menu-page section:not(.digital-menu-hero),
    .booking-page section:not(.booking-hero) {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

/* Page wrappers stay flush with header; hero padding handles offset */
@media (max-width: 1023px) {
    .shop-page,
    .delivery-page,
    .digital-menu-page,
    .booking-page {
        padding-top: 0 !important;
    }
}

@media (min-width: 1024px) {
    .shop-page,
    .delivery-page,
    .digital-menu-page,
    .booking-page {
        padding-top: 0 !important;
    }
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-section__inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding-inline: 0;
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    z-index: 2;
    color: white;
}

@media (min-width: 768px) {
    .hero-section__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 1280px) {
    .hero-section__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
}

.hero-section--center .hero-section__inner,
.hero-section--generic .hero-section__inner {
    grid-template-columns: minmax(0, 1fr);
}

.hero-section__media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: clamp(220px, 38vw, 360px);
    max-width: 100%;
    z-index: 1;
}

.hero-section__media[data-has-image="false"] {
    justify-content: center;
}

.hero-section__media[data-has-image="false"] .hero-info-badge {
    position: relative;
    transform: none;
    bottom: auto;
    left: auto;
    margin-top: 0;
}

.hero-section__image-frame {
    width: clamp(260px, 38vw, 460px);
    aspect-ratio: 5 / 6;
    border-radius: clamp(1.5rem, 3vw, 2.4rem);
    background: -webkit-linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    background: -o-linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.75rem);
    position: relative;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.hero-section__image-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.3));
    -moz-filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.3));
    -o-filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.3));
    filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.3));
    -webkit-transform: translateY(6%);
    -moz-transform: translateY(6%);
    -ms-transform: translateY(6%);
    -o-transform: translateY(6%);
    transform: translateY(6%);
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
}

.hero-section__content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    position: relative;
    z-index: 2;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.05rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    align-self: flex-start;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-pill i,
.hero-pill__dot {
    font-size: 1rem;
    opacity: 0.95;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.hero-title {
    font-size: clamp(2.2rem, 5.2vw, 3.75rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 6px 36px rgba(0, 0, 0, 0.5), 
                 0 3px 14px rgba(0, 0, 0, 0.4),
                 0 1px 5px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.8vw, 1.55rem);
    margin: 0;
    line-height: 1.65;
    color: #ffffff;
    opacity: 0.98;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45), 
                 0 2px 12px rgba(0, 0, 0, 0.35),
                 0 1px 5px rgba(0, 0, 0, 0.25);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
    padding: 0.5rem 0;
    border-radius: 0.5rem;
}

.hero-description {
    font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    line-height: 1.75;
    margin: 0;
    color: #ffffff;
    opacity: 0.95;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.4), 
                 0 1px 6px rgba(0, 0, 0, 0.25);
}

.hero-feature-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    color: inherit;
    opacity: 0.82;
}

.hero-feature__dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.hero-primary-cta,
.hero-secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.hero-primary-cta {
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
    box-shadow: 0 18px 36px -22px rgba(15, 23, 42, 0.65);
}

.hero-primary-cta:hover,
.hero-secondary-cta:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.hero-primary-cta .hero-cta__icon {
    font-size: 1rem;
}

.hero-secondary-cta {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    opacity: 0.9;
}

.hero-info-badge {
    position: absolute;
    bottom: clamp(-0.75rem, -1.6vw, -1.5rem);
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -o-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    border-radius: 1rem;
    background: rgba(17, 25, 40, 0.85);
    color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    -moz-backdrop-filter: blur(12px);
    -o-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.65);
    -moz-box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.65);
    box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.65);
    text-align: left;
}

.hero-info-badge strong {
    display: block;
    font-size: 0.95rem;
}

.hero-info-badge small {
    font-size: 0.78rem;
    opacity: 0.8;
}

@media (max-width: 767px) {
    .hero-section__inner {
        text-align: center;
    }

    .hero-section__content {
        align-items: center;
        margin-inline: auto;
        width: min(100%, 520px);
    }

    .hero-info-badge {
        position: relative;
        transform: none;
        bottom: auto;
        left: auto;
        margin-top: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .home-shell {
        padding-left: clamp(3rem, 6vw, 4.5rem);
        padding-right: clamp(3rem, 6vw, 4.5rem);
        padding-bottom: clamp(4rem, 8vw, 5rem);
    }
}

.home-section {
    width: 100%;
    max-width: min(1160px, 100%);
    margin: 0 auto;
}

.home-section.is-wide {
    max-width: min(1280px, 100%);
}

.home-section.home-hero {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

@media (min-width: 768px) {
    .section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.section-title {
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text, #1f2937);
}

.theme-coffee .section-title {
    color: rgba(255, 255, 255, .92);
}

.home-party-countdown {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 3vw, 1.75rem);
    font-weight: 700;
    padding: .35rem 1.05rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .82);
    color: #111827;
    box-shadow: 0 12px 30px -18px rgba(15, 23, 42, .4);
}

.theme-coffee .home-party-countdown {
    background-color: rgba(17, 24, 39, .84);
    color: rgba(255, 255, 255, .92);
}

.home-hero {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hero-swiper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    touch-action: pan-y;
    overflow: hidden;
}

.hero-swiper .swiper-slide {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3rem);
    padding: 3.5rem 1.75rem;
    min-height: 480px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero-swiper .swiper-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 1024px) {
    .hero-swiper .swiper-slide {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 4.5rem 5rem;
        min-height: 560px;
        gap: 4rem;
    }
}

.hero-slide__content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    text-align: center;
    position: relative;
    z-index: 2;
    color: white;
}

.hero-slide__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
    .hero-slide__content {
        text-align: right;
        align-items: flex-start;
        max-width: 50%;
    }
}

.hero-slide__title {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 6px 32px rgba(0, 0, 0, 0.5), 
                 0 3px 12px rgba(0, 0, 0, 0.4),
                 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.1);
}

.hero-slide__subtitle {
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    opacity: .98;
    line-height: 1.65;
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 
                 0 2px 10px rgba(0, 0, 0, 0.35),
                 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
    padding: 0.5rem 0;
    border-radius: 0.5rem;
}

.hero-slide__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    z-index: 2;
    margin-top: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-slide__cta:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3));
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.7);
}

.hero-slide__figure {
    flex: 1 1 50%;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .hero-slide__figure {
        max-width: 45%;
    }
}

.hero-slide__figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: clamp(280px, 42vh, 480px);
    object-fit: contain;
    filter: drop-shadow(0 22px 60px rgba(15, 23, 42, .35));
    z-index: 1;
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
}

.home-category-card {
    padding: clamp(1.35rem, 3.2vw, 1.9rem);
    border-radius: clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(.75rem, 2vw, 1.2rem);
    min-height: clamp(200px, 45vw, 230px);
    transition: transform .35s ease;
}

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

.home-category-card__figure {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(120px, 25vw, 150px);
}

.home-category-card__figure img {
    max-width: 85%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(15, 23, 42, .18));
}

.home-category-card__title {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 700;
    color: var(--c-text, #1f2937);
}

.theme-coffee .home-category-card__title {
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 480px) {
    .home-shell {
        padding: 2.25rem 1.25rem 3.5rem;
        gap: 1.75rem;
    }

    .hero-section {
        margin: 1.25rem 0;
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

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

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

    .hero-section__content {
        max-width: 100%;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .home-category-card {
        padding: 1rem;
        min-height: 170px;
        border-radius: 1.35rem;
    }

    .home-category-card__figure {
        height: 100px;
    }

    .home-category-card__title {
        font-size: 0.95rem;
    }

    .glass-card {
        border-radius: 1.5rem;
    }
}

.home-builders .swiper-container {
    overflow: visible;
    touch-action: pan-y;
}

.home-builders .builder-card {
    border-radius: clamp(1.5rem, 3vw, 2.25rem);
}

.builder-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 24, 42, .12);
}

.builder-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-food-party {
    position: relative;
}

.home-food-party .product-swiper {
    position: relative;
    padding: 0 clamp(.5rem, 4vw, 1.5rem);
    overflow: visible;
    touch-action: pan-x;
}

.home-food-party .swiper-wrapper {
    padding-bottom: clamp(1rem, 3vw, 1.75rem);
}

.home-party-card {
    position: relative;
    padding: clamp(1.9rem, 4vw, 2.75rem);
    border-radius: clamp(1.8rem, 3.5vw, 2.6rem);
    min-height: clamp(340px, 70vw, 420px);
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: clamp(1rem, 2.6vw, 1.5rem);
    transition: transform .35s ease;
}

.home-party-card:hover {
    transform: translateY(-8px);
}

.home-party-card .party-badge {
    top: clamp(1.25rem, 3vw, 1.65rem);
    left: clamp(1.25rem, 3vw, 1.65rem);
}

.home-party-card__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(180px, 45vw, 220px);
}

.home-party-card__figure img {
    max-width: 76%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(15, 23, 42, .25));
}

.home-party-card__body {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.home-party-card__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.home-party-card__desc {
    font-size: clamp(.9rem, 2.4vw, 1rem);
    color: var(--c-text-secondary, rgba(55, 65, 81, .78));
    line-height: 1.6;
}

.theme-coffee .home-party-card__desc {
    color: rgba(255, 255, 255, .75);
}

.home-party-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 4vw, 2rem);
    flex-wrap: wrap;
    margin-top: auto;
}

.home-party-card__price {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
}

.home-party-gradient {
    position: absolute;
    top: 0;
    bottom: clamp(1rem, 4vw, 1.5rem);
    width: clamp(40px, 12vw, 160px);
    pointer-events: none;
    z-index: 2;
}

.home-party-gradient--left {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

.home-party-gradient--right {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

.theme-coffee .home-party-gradient--left {
    background: linear-gradient(90deg, rgba(32, 24, 24, .94), rgba(32, 24, 24, 0));
}

.theme-coffee .home-party-gradient--right {
    background: linear-gradient(270deg, rgba(32, 24, 24, .94), rgba(32, 24, 24, 0));
}

#app-container {
    padding-top: var(--header-height-mobile);
    padding-bottom: clamp(6.5rem, 16vw, 8.5rem);
}

@media (min-width: 1024px) {
    #app-container {
        padding-top: var(--header-height-desktop);
        padding-bottom: 4.5rem;
    }
}

body.circular-menu-active #app-container {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;
}

@media (min-width: 1024px) {
    body.circular-menu-active #app-container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

body.header-scrolled #global-nav,
body.header-scrolled #mobile-header {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 20px 50px -28px rgba(15, 23, 42, .45);
}

body.theme-coffee.header-scrolled #global-nav,
body.theme-coffee.header-scrolled #mobile-header {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 22px 54px -30px rgba(0, 0, 0, .5);
}

.theme-food {
    --c-bg: var(--color-bg-food);
    --c-text: var(--color-text-dark);
    --c-text-secondary: var(--color-primary-medium);
}

.theme-coffee {
    --c-bg: var(--color-bg-coffee);
    --c-text: var(--color-text-light);
    --c-text-secondary: var(--color-primary-light);
}

.theme-cold-drink {
    --c-bg: var(--color-bg-cold-drink);
    --c-text: #004D40;
    --c-text-secondary: #00796B;
}

#app-container {
    color: var(--c-text);
    opacity: 0;
    background-color: transparent;
}

#app-container.bg-active {
    --bg-opacity: var(--bg-overlay-opacity, .85);
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent-dark);
    border-radius: .75rem;
}

.glass-card:focus-visible {
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent-dark), 0 8px 32px -12px rgba(0, 0, 0, .15);
}

.glass-card {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .15);
}

.theme-food .glass-card,
.theme-cold-drink .glass-card {
    background: radial-gradient(circle, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .4) 100%);
    border: 1px solid rgba(255, 255, 255, .3);
}

.theme-coffee .glass-card {
    background: radial-gradient(circle, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .2);
}

/* Food Party badge on product cards */
.party-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--color-primary-dark);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}

.btn {
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px -5px var(--color-accent);
}

.btn-secondary {
    background: rgba(0, 0, 0, .05);
    color: var(--c-text);
    border: 1px solid rgba(0, 0, 0, .1);
}

.theme-coffee .btn-secondary {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}

#overlay {
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s;
}

#overlay.is-visible {
    opacity: .6;
    visibility: visible;
    transition-delay: 0s;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s .3s;
    --modal-transition-duration: .4s;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.modal-card {
    transition: transform var(--modal-transition-duration) cubic-bezier(.16, 1, .3, 1), opacity var(--modal-transition-duration);
    transform: scale(.95) translateY(20px);
    opacity: 0;
    will-change: transform, opacity;
    background: var(--c-bg);
    color: var(--c-text);
    border-radius: 1rem;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.35);
}

.modal.is-open .modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    z-index: 40;
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    color: var(--c-text);
    overflow-y: auto;
    padding: 1.5rem 1rem 2.5rem;
    box-sizing: border-box;
    background: rgba(12, 16, 22, .92);
    border-left: 1px solid rgba(255, 255, 255, .08);
    box-shadow: -18px 0 40px -28px rgba(9, 12, 18, .9);
    backdrop-filter: blur(26px) saturate(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(1.05);
}

#cart-panel.is-open {
    transform: translateX(0);
}

#cart-panel .cart-panel-inner {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

#global-nav,
#mobile-nav {
    transition: border-color .7s ease, box-shadow .7s ease;
}

#global-nav {
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.theme-coffee #global-nav {
    border-color: rgba(255, 255, 255, .35);
}

#mobile-nav {
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: .35rem 0;
}

@media (max-width: 1023px) {
    #cart-panel {
        top: var(--header-height-mobile);
        height: calc(100% - var(--header-height-mobile));
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        padding: 1.5rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    #cart-panel .cart-panel-inner {
        max-width: 28rem;
        transform: none;
        transform-origin: initial;
    }
}

.theme-coffee #mobile-nav {
    border-color: rgba(255, 255, 255, .25);
}

.preorder-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .68);
    color: #1f2937;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, .08);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
    white-space: nowrap;
    cursor: pointer;
}

.preorder-chip i {
    font-size: .95rem;
    opacity: .75;
}

.preorder-chip:not(.is-active):hover {
    background: rgba(255, 255, 255, .85);
}

.preorder-chip.is-active {
    background: linear-gradient(120deg, rgba(247, 201, 72, .95), rgba(255, 232, 150, .92));
    color: #0a0d12;
    border-color: transparent;
    box-shadow: 0 12px 30px -18px rgba(247, 201, 72, .75);
}

@media (max-width: 768px) {
    .preorder-chip {
        padding: .5rem .95rem;
        font-size: .78rem;
    }
}

.product-modal-close-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 20;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background .25s ease, transform .25s ease;
}

.product-modal-close-btn:hover {
    background: rgba(0, 0, 0, .65);
    transform: scale(1.05);
}

#mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    min-height: var(--header-height-mobile);
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    gap: .75rem;
}

@media (min-width: 1024px) {
    #mobile-header {
        display: none;
    }
}

.theme-coffee #mobile-header {
    border-color: rgba(255, 255, 255, .25);
}

.mobile-header-leading {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    position: relative;
}

.mobile-back-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.mobile-back-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(var(--color-accent), 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.mobile-back-btn:hover::before {
    width: 100%;
    height: 100%;
}

.mobile-back-btn i {
    position: relative;
    z-index: 1;
}

/* Dropdown menu styles */
.mobile-header-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-header-dropdown.hidden {
    display: none !important;
}

#mobile-header.home-centered {
    justify-content: flex-start;
}

#mobile-header.home-centered .mobile-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    width: clamp(140px, 42vw, 200px);
}

#mobile-header.home-centered .mobile-header-logo img {
    height: 48px;
}

#mobile-header.home-centered .mobile-header-leading,
#mobile-header.home-centered .mobile-header-actions {
    flex: 0 0 auto;
    min-width: 0;
}

#mobile-header.home-centered .mobile-header-actions {
    margin-left: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

#mobile-menu-trigger {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .85);
    color: #1f2937;
    box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .55);
    transition: transform .2s ease;
    cursor: pointer;
}

#mobile-menu-trigger:hover {
    transform: translateY(-2px);
}

#mobile-menu-trigger i {
    font-size: 1.65rem;
}

.mobile-dropdown-content {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
    padding: 0.5rem;
    min-width: 180px;
    z-index: 100;
}

.mobile-dropdown-content.hidden {
    display: none !important;
}

.mobile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #1f2937;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.mobile-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.mobile-dropdown-item i {
    font-size: 1.35rem;
}

#mobile-header .mobile-header-logo {
    cursor: pointer;
}

#mobile-header .mobile-header-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .2));
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.mobile-header-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
    max-width: clamp(120px, 42vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none !important; /* Hide text globally */
}

.theme-coffee .mobile-header-title,
.theme-cold-drink .mobile-header-title {
    color: var(--color-text-light);
}

.mobile-header-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    font-weight: 600;
    color: #1f2937;
    background-color: rgba(255, 255, 255, .85);
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .45);
    flex-shrink: 0;
    text-decoration: none;
}

.mobile-header-link.hidden {
    display: none !important;
}

/* Icon-only home link */
.mobile-header-link.icon-only {
    padding: .5rem;
    width: 48px;
    height: 48px;
}

.mobile-header-link.icon-only span {
    display: none;
}

.mobile-header-link i {
    font-size: 1.45rem;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.mobile-header-actions .mobile-icon-btn.hidden {
    display: none !important;
}

.mobile-header-actions a.hidden {
    display: none !important;
}

.mobile-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .85);
    color: #1f2937;
    box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .55);
    transition: transform .2s ease;
}

.mobile-icon-btn:hover {
    transform: translateY(-2px);
}

.mobile-icon-btn i {
    font-size: 1.65rem;
}

.mobile-cart-badge {
    position: absolute;
    top: -.35rem;
    left: -.35rem;
}

/* Empty state */
.empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    color: var(--c-text-secondary);
}
.empty-state .title { font-weight: 800; letter-spacing: .02em; }
.empty-state .desc { opacity: .9; }

/* Utilities */
.shadow-soft { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.rounded-xl { border-radius: 1rem; }
.rounded-2xl { border-radius: 1.25rem; }
.backdrop-blur { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Responsive tweaks */
@media (max-width: 640px) {
    .btn { padding: .65rem 1rem; }
    .glass-card { border-radius: .9rem; }
}

.theme-cold-drink #global-nav {
    border-color: rgba(255, 255, 255, .35);
}

#mobile-nav {
    z-index: 51;
}

.desktop-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, .85);
    color: #1f2937;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .45);
    transition: transform .2s ease, box-shadow .2s ease;
}

.desktop-back-btn i {
    font-size: 1.5rem;
}

.desktop-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .5);
}

.theme-coffee .desktop-back-btn {
    background-color: rgba(255, 255, 255, .1);
    color: var(--color-text-light);
    box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .55);
}

.theme-coffee .desktop-back-btn:hover {
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .6);
}

.nav-link {
    color: rgba(31, 41, 55, .72);
    transition: color .2s ease;
}

.nav-link:hover {
    color: rgba(31, 41, 55, .95);
}

.theme-coffee .nav-link {
    color: rgba(255, 255, 255, .78);
}

.theme-coffee .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.nav-link.active {
    color: var(--color-accent-dark);
    font-weight: 700;
}

.mobile-nav-btn {
    color: #1f2937;
}

.mobile-nav-btn.active {
    color: var(--color-accent-dark);
}

.mobile-nav-btn.active span {
    color: var(--c-text);
    font-weight: 700;
}

.site-footer {
    padding: 2rem 1rem;
    margin-top: 4rem;
    border-top: 1px solid;
    border-color: rgba(0, 0, 0, .1);
}

.theme-coffee .site-footer {
    border-color: rgba(255, 255, 255, .1);
}

.swiper-pagination-bullet-active {
    background-color: var(--color-accent) !important;
}

.product-swiper {
    width: 100%;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.product-swiper .swiper-slide {
    width: 320px;
    transition: transform .4s ease, opacity .4s ease;
}

.product-swiper .swiper-slide:not(.swiper-slide-active) {
    transform: scale(.85);
    opacity: .7;
}

.builder-swiper {
    width: 100%;
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.builder-swiper .swiper-slide {
    transition: transform .5s ease, opacity .5s ease;
    opacity: .5;
    transform: scale(.8);
}

.builder-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.builder-swiper .builder-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 24, 42, .12);
}

.builder-swiper .builder-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-swiper {
    width: 100%;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.blog-swiper .swiper-slide {
    width: 320px;
    transition: transform .4s ease, opacity .4s ease;
}

.blog-swiper .swiper-slide:not(.swiper-slide-active) {
    transform: scale(.85);
    opacity: .7;
}

.blog-post-swiper .swiper-pagination-bullet-active,
.blog-content-swiper .swiper-pagination-bullet-active {
    background-color: var(--c-text) !important;
}

.blog-post-swiper .swiper-slide,
.blog-content-swiper .swiper-slide {
    aspect-ratio: 1 / 1;
}

.blog-post-swiper .swiper-slide img,
.blog-content-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================================================
   Unified Light Orange Theme for All 4 Pages
   Shop, Delivery, Digital Menu & Booking - All Same Style
   ================================================================ */

/* All pages use light background with orange accents */
.shop-page,
.delivery-page,
.digital-menu-page,
.booking-page {
    background: linear-gradient(135deg, #fafafa 0%, #fff 50%, #fef7f3 100%);
    color: #1e293b;
    min-height: 100vh;
    --hero-bg-start: #7c2d12;
    --hero-bg-end: #ea580c;
    --hero-accent: #fb923c;
    --hero-text-primary: #ffffff;
    --hero-text-secondary: rgba(255, 255, 255, 0.92);
    --hero-card-border: rgba(249, 115, 22, 0.22);
    --hero-card-shadow: rgba(249, 115, 22, 0.28);
    --hero-pill-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(251, 191, 36, 0.18) 100%);
    --hero-pill-text: #f97316;
}

.delivery-page {
    --hero-bg-start: #065f46;
    --hero-bg-end: #059669;
    --hero-accent: #34d399;
    --hero-card-border: rgba(52, 211, 153, 0.28);
    --hero-card-shadow: rgba(16, 185, 129, 0.28);
    --hero-pill-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(45, 212, 191, 0.2) 100%);
    --hero-pill-text: #10b981;
}

.digital-menu-page {
    --hero-bg-start: #1d4ed8;
    --hero-bg-end: #2563eb;
    --hero-accent: #60a5fa;
    --hero-card-border: rgba(59, 130, 246, 0.24);
    --hero-card-shadow: rgba(96, 165, 250, 0.28);
    --hero-pill-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(96, 165, 250, 0.2) 100%);
    --hero-pill-text: #60a5fa;
}

.booking-page {
    --hero-bg-start: #6d28d9;
    --hero-bg-end: #7c3aed;
    --hero-accent: #c084fc;
    --hero-card-border: rgba(192, 132, 252, 0.25);
    --hero-card-shadow: rgba(167, 139, 250, 0.28);
    --hero-pill-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(192, 132, 252, 0.22) 100%);
    --hero-pill-text: #c084fc;
}

/* Hero sections - consistent light style with orange gradients */
.shop-hero .hero-section,
.delivery-hero .hero-section,
.digital-menu-hero .hero-section,
.booking-hero .hero-section {
    background: linear-gradient(135deg, var(--hero-bg-start, #7c2d12) 0%, var(--hero-bg-end, #ea580c) 100%);
    color: var(--hero-text-primary, #ffffff);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18), 0 16px 48px -18px var(--hero-card-shadow, rgba(249, 115, 22, 0.28));
}

.shop-hero .hero-section h1,
.delivery-hero .hero-section h1,
.digital-menu-hero .hero-section h1,
.booking-hero .hero-section h1 {
    color: var(--hero-text-primary, #ffffff);
    text-shadow: 0 18px 36px rgba(15, 23, 42, 0.35);
}

.shop-hero .hero-section p,
.delivery-hero .hero-section p,
.digital-menu-hero .hero-section p,
.booking-hero .hero-section p {
    color: var(--hero-text-secondary, rgba(255, 255, 255, 0.92));
}

/* Hero cards - light style consistent across all pages */
.shop-hero .hero-card,
.delivery-hero .hero-card,
.digital-menu-hero .hero-card,
.booking-hero .hero-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--hero-card-border, rgba(249, 115, 22, 0.22));
    box-shadow: 0 18px 46px -22px rgba(15, 23, 42, 0.22), 0 16px 42px -20px var(--hero-card-shadow, rgba(249, 115, 22, 0.28));
    backdrop-filter: blur(12px);
    color: #1e293b;
}

.shop-hero .hero-card h1,
.shop-hero .hero-card h2,
.shop-hero .hero-card h3,
.delivery-hero .hero-card h1,
.delivery-hero .hero-card h2,
.delivery-hero .hero-card h3,
.digital-menu-hero .hero-card h1,
.digital-menu-hero .hero-card h2,
.digital-menu-hero .hero-card h3,
.booking-hero .hero-card h1,
.booking-hero .hero-card h2,
.booking-hero .hero-card h3 {
    color: #1e293b;
}

.shop-hero .hero-card p,
.delivery-hero .hero-card p,
.digital-menu-hero .hero-card p,
.booking-hero .hero-card p {
    color: #64748b;
}

/* Pills/badges in hero - orange theme */
.shop-hero .hero-pill,
.delivery-hero .hero-pill,
.digital-menu-hero .hero-pill,
.booking-hero .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: var(--hero-pill-bg, linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(251, 191, 36, 0.18) 100%));
    color: var(--hero-pill-text, #f97316);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Remove any dark theme overrides */
.digital-menu-page {
    background: linear-gradient(135deg, #fafafa 0%, #fff 50%, #fef7f3 100%) !important;
    color: #1e293b !important;
}

.digital-menu-hero::before,
.digital-hero-card,
.digital-hero-card::after {
    display: none !important;
}

/* Ensure all text is dark on light background */
.digital-menu-page h1,
.digital-menu-page h2,
.digital-menu-page h3,
.digital-menu-page h4,
.digital-menu-page h5,
.digital-menu-page h6,
.digital-menu-page p,
.digital-menu-page span,
.digital-menu-page div {
    color: inherit;
}

.digital-menu-page .hero-section {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%) !important;
}

/* Cards across all pages - consistent light style */
.shop-page .card,
.delivery-page .card,
.digital-menu-page .card,
.booking-page .card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 167, 38, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-page .card:hover,
.delivery-page .card:hover,
.digital-menu-page .card:hover,
.booking-page .card:hover {
    border-color: rgba(255, 167, 38, 0.25);
    box-shadow: 0 12px 32px rgba(255, 167, 38, 0.15);
    transform: translateY(-4px);
}

/* Hero meta/badges - consistent light orange theme */
.shop-hero .hero-meta,
.delivery-hero .hero-meta,
.digital-hero-meta,
.booking-hero .hero-meta {
    display: inline-flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ================================
   Review cards - unified styling
   ================================ */
.review-list {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
    .review-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.review-card.glass-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.18);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: #0f172a;
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.review-card__avatar {
    width: clamp(2.5rem, 4vw, 3rem);
    height: clamp(2.5rem, 4vw, 3rem);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(59, 130, 246, 0.85));
    color: #ffffff;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -12px rgba(59, 130, 246, 0.45);
}

.review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.review-card__author {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.review-card__star::before {
    content: '★';
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.5);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.review-card__star.is-active::before {
    color: #f59e0b;
    text-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.review-card__rating-value {
    font-size: 0.9rem;
    font-weight: 700;
    padding-inline: 0.45rem;
    padding-block: 0.1rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.review-card__date {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.45);
}

.review-card__text {
    font-size: clamp(0.92rem, 2vw, 1rem);
    line-height: 1.8;
    color: #475569;
}

.review-empty {
    border-radius: 1.25rem;
    background: rgba(15, 23, 42, 0.06);
}

/* Hero images - consistent style */
.shop-hero .hero-image,
.delivery-hero .hero-image,
.digital-hero-image,
.booking-hero .hero-image {
    width: min(360px, 80vw);
    height: min(360px, 80vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 167, 38, 0.08) 0%, rgba(255, 167, 38, 0.02) 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 25px 80px -30px rgba(255, 167, 38, 0.3);
    border: 3px solid rgba(255, 167, 38, 0.1);
}

/* Section styling - consistent across all pages */
.shop-page section,
.delivery-page section,
.digital-menu-section,
.booking-page section {
    position: relative;
}

.shop-page section::after,
.delivery-page section::after,
.digital-menu-section::after,
.booking-page section::after {
    content: "";
    position: absolute;
    inset: 8% 6%;
    border-radius: 40px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 167, 38, 0.03) 0%, transparent 70%);
    z-index: -1;
}

/* Section tags/badges - orange theme */
.shop-page .section-tag,
.delivery-page .section-tag,
.digital-menu-section .section-tag,
.booking-page .section-tag {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 167, 38, 0.1);
    color: #FF7043;
    border: 1px solid rgba(255, 167, 38, 0.2);
    font-weight: 600;
}

.digital-menu-section .swiper-pagination {
    bottom: -2.5rem !important;
}

.swiper-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 18, 34, .8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .65);
    transition: transform .3s ease, background .3s ease;
}

.swiper-nav-btn:hover {
    background: rgba(234, 244, 255, .95);
    color: #0c1529;
    transform: translateY(-50%) translateX(-2px);
}

.swiper-button-prev.swiper-nav-btn { left: -1.75rem; }
.swiper-button-next.swiper-nav-btn { right: -1.75rem; }

@media (max-width: 768px) {
    .swiper-button-prev.swiper-nav-btn,
    .swiper-button-next.swiper-nav-btn {
        display: none;
    }
}

.digital-category-card {
    position: relative;
    padding: 1.75rem 1.25rem;
    border-radius: 1.75rem;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(17, 25, 44, .92) 0%, rgba(28, 39, 64, .78) 100%);
    border: 1px solid rgba(178, 208, 255, .14);
    backdrop-filter: blur(18px);
    text-align: center;
    color: #fff;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.digital-category-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6);
}

.digital-category-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 65%);
    opacity: 0;
    transition: opacity .4s ease;
}

.digital-category-card:hover .digital-category-glow {
    opacity: 1;
}

.digital-category-card span {
    color: rgba(232, 241, 255, .92);
}

.digital-menu-cta {
    background: linear-gradient(150deg, rgba(14, 21, 38, .94) 0%, rgba(22, 32, 54, .91) 60%, rgba(31, 46, 76, .9) 100%);
    border-top: 1px solid rgba(166, 206, 255, .12);
    border-bottom: 1px solid rgba(166, 206, 255, .12);
}

.digital-menu-cta .btn-secondary {
    background: rgba(208, 227, 255, .18);
    border-color: rgba(214, 231, 255, .4);
    color: rgba(245, 250, 255, .95);
}

.digital-menu-cta .btn-outline {
    border: 1px solid rgba(208, 227, 255, .38);
    color: rgba(232, 240, 255, .94);
}

.digital-menu-cta .btn-outline:hover {
    background: rgba(215, 232, 255, .16);
    color: #fff;
}

.digital-builder-card {
    background: linear-gradient(140deg, rgba(15, 24, 42, .92) 0%, rgba(26, 38, 64, .86) 100%);
    border: 1px solid rgba(176, 210, 255, .18);
    box-shadow: 0 32px 60px -35px rgba(5, 10, 22, .8);
}

.digital-builder-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 46px 90px -32px rgba(7, 14, 30, .75);
}

.digital-builder-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(12px);
    transition: transform .3s ease, background .3s ease;
}

.digital-builder-card:hover .digital-builder-cta {
    background: rgba(215, 232, 255, .28);
    transform: translateY(-2px);
}

.digital-slot-chips,
.digital-builder-slots {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: .75rem;
}

.slot-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .75rem;
    font-size: .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all .2s ease;
}

.slot-chip-active {
    background: var(--themed-primary, #f97316);
    border-color: transparent;
    box-shadow: 0 12px 24px -10px rgba(249, 115, 22, .45);
    color: #fff;
}

.order-kind-summary {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(175, 205, 255, .16);
    box-shadow: 0 18px 40px -28px rgba(6, 14, 32, .7);
}

.order-kind-summary[data-kind="delivery"] {
    background: linear-gradient(140deg, rgba(15, 24, 42, .9) 0%, rgba(28, 42, 70, .85) 100%);
}

.order-kind-summary[data-kind="takeaway"] {
    background: linear-gradient(140deg, rgba(56, 39, 16, .92) 0%, rgba(92, 56, 18, .88) 100%);
}

.order-kind-summary[data-kind="dine-in"] {
    background: linear-gradient(140deg, rgba(20, 41, 24, .9) 0%, rgba(40, 70, 43, .82) 100%);
}

.order-kind-summary[data-kind="postal"] {
    background: linear-gradient(135deg, rgba(18, 32, 52, .92) 0%, rgba(22, 47, 74, .88) 100%);
}

.order-kind-chip {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #f4f7ff;
}

.order-kind-icon {
    display: inline-flex;
    font-size: 1.85rem;
    line-height: 1;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
}

.order-kind-title {
    color: #ffffff;
}

.order-kind-caption {
    color: rgba(227, 236, 255, .85);
}

.order-kind-note {
    margin: 0;
    font-size: .85rem;
    color: rgba(212, 226, 255, .86);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .order-kind-summary {
        padding: .85rem;
        border-radius: 1rem;
    }
    .order-kind-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .digital-menu-hero::before {
        background: radial-gradient(circle at top, rgba(255, 255, 255, .18) 0%, transparent 55%);
    }
    .digital-hero-image {
        width: min(300px, 85vw);
        height: min(300px, 85vw);
    }
    .digital-menu-section::after {
        inset: 4% 3%;
        border-radius: 28px;
    }
}

@media (max-width: 640px) {
    .digital-menu-page {
        background: linear-gradient(170deg, #0f182b 0%, #131f36 75%, #10192c 100%);
    }
    .digital-hero-card {
        padding: 2.5rem;
        border-radius: 28px;
    }
    .digital-hero-card h1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }
    .digital-hero-card p {
        font-size: .95rem;
    }
    .digital-menu-section::after {
        display: none;
    }
    .digital-category-card {
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
    .digital-category-card img {
        height: 5.5rem;
    }
}

/* Skeleton loaders */
.skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.08), rgba(0,0,0,.06)); }
.theme-coffee .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.1), rgba(255,255,255,.06)); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* PWA Install and Notification Prompts */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100px);
    }
}

.animate-slide-up {
    animation: slide-up 0.4s ease-out;
}
.skeleton-text { height: 1rem; border-radius: .5rem; }
.skeleton-avatar { width: 3rem; height: 3rem; border-radius: 9999px; }
.skeleton-card { border-radius: 1rem; height: 200px; }

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid;
    background-color: transparent;
    transition: border-color .3s, box-shadow .3s;
    border-color: var(--c-text-secondary);
    color: var(--c-text);
}

select.form-select option {
    background: var(--c-bg);
    color: var(--c-text);
}

.form-textarea {
    min-height: 120px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--c-bg), 0 0 0 7px var(--color-accent-dark);
}

.form-input.invalid,
.form-textarea.invalid,
.form-select.invalid {
    border-color: var(--color-error);
}

.form-error-msg {
    color: var(--color-error);
    font-size: .875rem;
    margin-top: .25rem;
    display: none;
}

.option-btn {
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .7);
    background-color: transparent;
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.option-btn:hover:not(.opacity-50) {
    border-color: rgba(255, 255, 255, .6);
    color: rgba(255, 255, 255, .9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

#product-options-form input:checked+.option-btn {
    background-color: var(--color-accent-dark);
    color: var(--color-white);
    border-color: var(--color-accent-dark);
    box-shadow: 0 4px 12px rgba(255, 107, 0, .3);
    transform: scale(1.05);
}

.variant-selector-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: .01em;
}

.variant-selector-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .35);
}

.variant-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}

.variant-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    border-width: 2px;
    backdrop-filter: blur(12px);
    transition: all .2s ease;
}

.variant-chip__value {
    font-weight: 700;
}

.variant-chip__price {
    font-size: .8rem;
    opacity: .8;
}

.variant-chip__badge {
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .15);
    color: inherit;
}

.variant-chip__badge--danger {
    background-color: rgba(239, 68, 68, .2);
    color: #fee2e2;
}

.variant-chip.is-disabled {
    cursor: not-allowed;
    opacity: .45;
}

.variant-summary {
    width: 100%;
    margin-top: .75rem;
    padding: .85rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
}

.variant-summary__title {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .5rem;
    opacity: .85;
}

.variant-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.variant-summary__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .85rem;
}

.variant-summary__name {
    font-weight: 600;
    opacity: .8;
}

.variant-summary__value {
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.variant-summary__price {
    font-weight: 700;
    font-size: .8rem;
}

.variant-summary__price.is-positive {
    color: #34d399;
}

.variant-summary__price.is-negative {
    color: #f87171;
}

.variant-selector-group {
    animation: fadeInUp 0.4s ease-out;
}

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

/* Variant selector checkmark indicator */
#product-options-form input:checked+.option-btn::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    color: var(--color-accent-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Smooth price transition when variant is selected */
#modal-price {
    transition: transform 0.2s ease-out;
}

#modal-price.price-updating {
    transform: scale(1.1);
}

.ingredient-checkbox + label {
    text-decoration: none;
}

.ingredient-checkbox + label span {
    text-decoration: none;
}

.ingredient-checkbox:checked+label {
    background-color: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

.ingredient-checkbox:checked+label span:last-child {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--c-bg);
}

.scroll-y-soft {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding-inline-end: .5rem;
    scrollbar-width: thin;
}

.scroll-y-soft::-webkit-scrollbar {
    width: 6px;
}

.scroll-y-soft::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, .2);
    border-radius: 999px;
}

@media (max-width: 1023px) {
    .scroll-y-soft {
        max-height: none;
        overflow-y: visible;
        padding-inline-end: 0;
    }
}

.subcategory-filters {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.subcategory-filters::-webkit-scrollbar {
    display: none;
}

.subcategory-filter-btn {
    padding: .5rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    border: 2px solid;
    border-color: var(--c-text-secondary);
    color: var(--c-text-secondary);
    transition: all .3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.subcategory-filter-btn.active {
    background-color: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

.blog-category-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.checkout-page-shell {
    align-items: flex-start;
}

.checkout-form-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checkout-card-header {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.checkout-step-badge {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--color-accent-dark), rgba(251, 140, 0, .65));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.1rem;
}

.checkout-card-caption {
    font-size: .85rem;
    color: rgba(15, 23, 42, .6);
    margin-top: .2rem;
}

.theme-coffee .checkout-card-caption {
    color: rgba(255, 255, 255, .6);
}

.checkout-section {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.25rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(16px);
}

.theme-coffee .checkout-section {
    background: rgba(15, 23, 42, .25);
    border-color: rgba(255, 255, 255, .12);
}

.checkout-section--compact {
    padding-bottom: 1rem;
}

.checkout-section__header {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 1rem;
}

.checkout-section__title {
    font-weight: 800;
    font-size: 1.05rem;
}

.checkout-section__hint {
    font-size: .8rem;
    color: rgba(15, 23, 42, .55);
}

.theme-coffee .checkout-section__hint {
    color: rgba(255, 255, 255, .55);
}

.checkout-map {
    width: 100%;
    min-height: 160px;
    border-radius: 1rem;
    border: 1px dashed rgba(15, 23, 42, .2);
    background: rgba(15, 23, 42, .05);
}

.checkout-summary-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checkout-summary-banner {
    font-size: .85rem;
    color: rgba(15, 23, 42, .65);
    text-align: right;
    min-height: 1.25rem;
}

.theme-coffee .checkout-summary-banner,
.theme-coffee .checkout-summary-date {
    color: rgba(255, 255, 255, .6);
}

.checkout-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.checkout-summary-date {
    font-size: .85rem;
    color: rgba(15, 23, 42, .55);
}

.checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.checkout-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.theme-coffee .checkout-item {
    border-color: rgba(255, 255, 255, .12);
}

.checkout-item__meta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.checkout-item__name {
    font-weight: 700;
}

.checkout-item__qty {
    font-size: .85rem;
    opacity: .7;
}

.checkout-item-variants {
    font-size: .75rem;
    color: #fb923c;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.checkout-item-variants i {
    font-size: .85rem;
}

.checkout-item__price {
    font-weight: 700;
    white-space: nowrap;
}

.checkout-totals {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 1rem 0;
}

.checkout-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.checkout-totals__row.is-discount {
    color: #16a34a;
}

.checkout-hint {
    font-size: .75rem;
    margin-top: .35rem;
}

.checkout-hint--positive {
    color: #15803d;
}

.checkout-hint--negative {
    color: #dc2626;
}

.checkout-payment-methods {
    border-top: 1px solid rgba(15, 23, 42, .08);
    padding-top: 1.25rem;
}

.checkout-payment-methods__title {
    font-weight: 700;
    margin-bottom: .75rem;
}

.checkout-payment-methods__options {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.checkout-payment-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.checkout-payment-option:hover {
    border-color: rgba(251, 146, 60, .4);
    box-shadow: 0 8px 18px -12px rgba(251, 146, 60, .4);
}

.checkout-payment-option__input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--color-accent-dark);
}

.checkout-payment-option__label {
    font-weight: 600;
}

.checkout-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(251, 140, 0, .12), rgba(255, 224, 178, .3));
}

.checkout-final__label {
    font-weight: 700;
}

.checkout-final__value {
    font-weight: 800;
    font-size: 1.25rem;
}

.checkout-wallet-breakdown {
    font-size: .8rem;
    margin-top: .5rem;
}

.checkout-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
    padding-block: .95rem;
}

.payment-result-card {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.payment-result__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.payment-result__icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 2rem;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .08);
}

.payment-result__titles {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.payment-result__title {
    font-size: 2.2rem;
    font-weight: 900;
}

.payment-result__message {
    font-size: 1.05rem;
    color: rgba(15, 23, 42, .7);
}

.theme-coffee .payment-result__message {
    color: rgba(255, 255, 255, .7);
}

.payment-summary {
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255, 255, 255, .65);
}

.theme-coffee .payment-summary {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(255, 255, 255, .1);
}

.payment-summary__block {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

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

.payment-summary__label {
    font-size: .85rem;
    color: rgba(15, 23, 42, .6);
}

.theme-coffee .payment-summary__label {
    color: rgba(255, 255, 255, .65);
}

.payment-summary__value {
    font-weight: 800;
    font-size: 1.1rem;
}

.payment-summary__value--accent {
    color: #16a34a;
}

.payment-summary__items {
    font-size: .85rem;
    color: rgba(15, 23, 42, .65);
    line-height: 1.6;
}

.theme-coffee .payment-summary__items {
    color: rgba(255, 255, 255, .7);
}

.payment-summary__order-type {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    padding-top: .75rem;
    border-top: 1px dashed rgba(15, 23, 42, .15);
}

.payment-summary__tracking {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: rgba(251, 191, 36, .15);
    border: 1px solid rgba(251, 191, 36, .35);
}

.payment-summary__tracking-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.payment-summary__tracking-code {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.payment-next-steps {
    border-radius: 1.5rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(59, 130, 246, .12);
}

.payment-next-steps__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1.25rem;
    display: grid;
    place-items: center;
    background: rgba(59, 130, 246, .2);
}

.payment-next-steps__icon i {
    font-size: 1.5rem;
    color: #2563eb;
}

.payment-next-steps.is-error {
    background: rgba(248, 113, 113, .18);
}

.payment-next-steps.is-error .payment-next-steps__icon {
    background: rgba(248, 113, 113, .24);
}

.payment-next-steps.is-warning {
    background: rgba(251, 191, 36, .18);
}

.payment-next-steps.is-warning .payment-next-steps__icon {
    background: rgba(251, 191, 36, .26);
}

.payment-next-steps.is-info {
    background: rgba(59, 130, 246, .12);
}

.payment-next-steps__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.payment-next-steps__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: rgba(15, 23, 42, .9);
}

.payment-next-steps.is-error .payment-next-steps__title {
    color: #b91c1c;
}

.payment-next-steps.is-warning .payment-next-steps__title {
    color: #b45309;
}

.payment-next-steps__text {
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(15, 23, 42, .7);
}

.theme-coffee .payment-next-steps__title {
    color: rgba(255, 255, 255, .9);
}

.theme-coffee .payment-next-steps__text {
    color: rgba(255, 255, 255, .7);
}

.payment-wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: rgba(22, 163, 74, .12);
}

.payment-wallet i {
    font-size: 2rem;
    color: #15803d;
}

.payment-wallet__title {
    font-weight: 700;
    color: #166534;
}

.payment-wallet__balance {
    font-size: 1.75rem;
    font-weight: 900;
    color: #047857;
}

.theme-coffee .payment-wallet {
    background: rgba(34, 197, 94, .18);
}

.theme-coffee .payment-wallet__title {
    color: #bbf7d0;
}

.theme-coffee .payment-wallet__balance {
    color: #4ade80;
}

.payment-result__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

#address-map,
#track-order-map,
#address-modal-map {
    height: 300px;
    border-radius: 1rem;
    margin-top: 1rem;
    z-index: 0;
}

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-tab-btn {
    transition: background-color .2s ease;
}

.profile-tab-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, .05);
}

.profile-tab-btn.active {
    background-color: rgba(0, 0, 0, .1);
}

.theme-coffee .profile-tab-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, .05);
}

.theme-coffee .profile-tab-btn.active {
    background-color: rgba(255, 255, 255, .1);
}

.prose-themed a {
    color: var(--color-accent-dark);
    text-decoration: none;
    font-weight: 600;
}

.prose-themed a:hover {
    text-decoration: underline;
}

.prose-themed h1,
.prose-themed h2,
.prose-themed h3 {
    color: var(--c-text);
}

.prose-themed p,
.prose-themed li {
    color: var(--c-text-secondary);
}

.blog-category-badge {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    font-size: .75rem;
    font-weight: 700;
    padding: .125rem .625rem;
    border-radius: 999px;
    display: inline-block;
}

.chat-bubble {
    max-width: 80%;
    padding: .75rem 1rem;
    border-radius: 1rem;
}

.chat-bubble.user {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    border-bottom-right-radius: .25rem;
    margin-left: auto;
}

.chat-bubble.support {
    background-color: rgba(0, 0, 0, .1);
    border-bottom-left-radius: .25rem;
    margin-right: auto;
}

.theme-coffee .chat-bubble.support {
    background-color: rgba(255, 255, 255, .1);
}

.faq-answer {
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-question.open+.faq-answer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-height: 500px;
}

.faq-question i {
    transition: transform 0.3s ease-in-out;
}

.faq-question.open i {
    transform: rotate(180deg);
}

.rating-stars i {
    cursor: pointer;
    color: var(--c-text-secondary);
    transition: color .2s ease, transform .2s ease;
}

.rating-stars:hover i {
    color: var(--color-accent-dark);
}

.rating-stars i:hover~i {
    color: var(--c-text-secondary);
}

.rating-stars i.rated {
    color: var(--color-accent-dark);
}

.rating-stars i:hover {
    transform: scale(1.2);
}

#ticket-detail-modal .modal-card {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

#ticket-conversation-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem .5rem;
}

#ticket-reply-area {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-coffee #ticket-reply-area {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.order-progress-bar .step .circle {
    transition: background-color 0.4s, border-color 0.4s;
}

.order-progress-bar .step .line {
    transition: background-color 0.4s;
    height: 2px;
    flex-grow: 1;
}

.order-progress-bar .step.active .circle,
.order-progress-bar .step.completed .circle {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-white);
}

.order-progress-bar .step.completed .line {
    background-color: var(--color-accent-dark);
}

@media (max-width:640px) {
    .modal {
        padding: 0;
    }
    #builder-modal,
    #login-modal,
    #ticket-modal,
    #rate-order-modal,
    #top-up-modal,
    #address-modal,
    #card-modal {
        padding: 1rem;
        align-items: center;
        justify-content: center;
    }
    #builder-modal .modal-card,
    #login-modal .modal-card,
    #ticket-modal .modal-card,
    #rate-order-modal .modal-card,
    #top-up-modal .modal-card,
    #address-modal .modal-card,
    #card-modal .modal-card {
        width: 100%;
        height: auto;
        max-width: 28rem;
        max-height: 95vh;
        border-radius: 1.5rem;
    }
    .modal .modal-card {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    #cart-panel.is-open {
        padding-bottom: 2.5rem;
    }
    #product-modal {
        padding: clamp(.5rem, 3vw, 1rem);
        align-items: center;
        justify-content: center;
    }
    #product-modal .modal-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-width: min(92vw, 24rem);
        max-height: 90vh;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, .2);
        box-shadow: 0 35px 80px -40px rgba(0, 0, 0, .55);
        transform: scale(.88);
        transform-origin: center center;
        margin: 0 auto;
    }
    #builder-modal-content-area {
        width: 100%;
        max-width: 96vw;
    }
    #builder-modal .modal-card {
        width: 96vw;
        max-width: 96vw;
        max-height: 96vh;
        margin: 2vh auto;
        transform: none;
        overflow-y: auto;
    }
    #product-modal .modal-card>.relative.flex-shrink-0 {
        height: auto;
    }
    #product-modal .modal-card .product-modal-content {
        flex-grow: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
    }
    #product-modal .modal-card .product-modal-content #product-modal-title {
        text-shadow: none;
        margin-bottom: 1rem;
    }
    #product-modal .modal-card .product-modal-footer {
        position: static;
        padding: 1.25rem 1.5rem;
    }
    #product-modal .product-modal-content .flex.gap-2>div {
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.1);
        background-color: rgba(0, 0, 0, 0.02);
        color: var(--c-text-secondary);
    }
    #product-modal .product-modal-content .flex.gap-2>div .text-accent,
    #product-modal .product-modal-content .flex.gap-2>div .text-yellow-400 {
        color: var(--color-accent-dark) !important;
    }
    #product-modal .product-modal-content .option-btn {
        border-color: var(--c-text-secondary);
        color: var(--c-text-secondary);
    }
    #product-modal .product-modal-content input:checked+.option-btn {
        background-color: var(--color-accent-dark);
        color: var(--color-white);
        border-color: var(--color-accent-dark);
    }
    #product-modal .product-modal-content .text-white\/80,
    #product-modal .product-modal-content .text-white\/70,
    #product-modal .product-modal-content .text-white\/90 {
        color: var(--c-text-secondary) !important;
    }
    #product-modal .product-modal-footer {
        color: inherit;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .theme-coffee #product-modal .product-modal-footer {
        border-top-color: rgba(255, 255, 255, 0.18);
    }
}

#menu-banner {
    position: relative;
    z-index: 10;
    margin: 1.5rem;
    display: none; /* Hidden on mobile by default */
}

@media (min-width: 768px) {
    #menu-banner {
        display: block; /* Show on desktop */
    }
}

#circular-menu-container, #menu-mobile {
    position: relative;
    z-index: 5;
}

/* Menu Banner Styles - Desktop Only - Redesigned */
.menu-banner-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "content cta";
    align-items: center;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    min-height: 200px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px -8px rgba(99, 102, 241, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    padding: 2rem 2.5rem;
    gap: 2rem;
}

.menu-banner-link:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 28px 70px -12px rgba(99, 102, 241, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.menu-banner-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.menu-banner-link:hover .menu-banner-art {
    transform: scale(1.05);
    opacity: 1;
}

/* Shimmer animation for banner */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.menu-banner-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.15), 
        transparent);
    animation: shimmer 3s infinite;
    z-index: 2;
}

.menu-banner-copy {
    grid-area: content;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
    max-width: 65%;
}

.banner-eyebrow {
    font-size: 0.85rem;
    font-weight: 800;
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    color: #fef3c7;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(251, 191, 36, 0.15);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    width: fit-content;
    backdrop-filter: blur(10px);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.3),
                 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    letter-spacing: -0.02em;
}

.banner-subtitle {
    font-size: 1.05rem;
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.95);
    max-width: 95%;
}

.menu-banner-cta {
    grid-area: cta;
    position: relative;
    z-index: 3;
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    color: #7c3aed;
    padding: 0.95rem 2.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 
                0 0 0 3px rgba(255, 255, 255, 0.3),
                0 0 20px rgba(251, 191, 36, 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.menu-banner-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.menu-banner-link:hover .menu-banner-cta::before {
    width: 300px;
    height: 300px;
}

.menu-banner-link:hover .menu-banner-cta {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #ffffff;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 12px 35px rgba(251, 191, 36, 0.5), 
                0 0 0 4px rgba(255, 255, 255, 0.4),
                0 0 30px rgba(251, 191, 36, 0.6);
}

/* Pulse animation for CTA */
@keyframes ctaPulse {
    0%, 100% { 
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 
                    0 0 0 3px rgba(255, 255, 255, 0.3),
                    0 0 20px rgba(251, 191, 36, 0.4);
    }
    50% { 
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 
                    0 0 0 5px rgba(255, 255, 255, 0.5),
                    0 0 30px rgba(251, 191, 36, 0.6);
    }
}

.menu-banner-cta {
    animation: ctaPulse 2s ease-in-out infinite;
}

/* White Blur Background for Delivery/Booking/Digital Cards on Homepage */
.carousel-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.carousel-card:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

.carousel-card h3 {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.carousel-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.carousel-card a {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease !important;
}

.carousel-card a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.carousel-tag {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #6366f1 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ===================================================================
   Unified Orange Theme for Shop, Delivery, Digital Menu & Booking Pages
   All 4 Pages - Same Light Style with Orange Accents
   ================================================================ */

/* Page backgrounds - all light with subtle orange tint */
.shop-page,
.delivery-page,
.digital-menu-page,
.booking-page {
    background: linear-gradient(135deg, #fafafa 0%, #fff 50%, #fef7f3 100%) !important;
    color: #1e293b !important;
}

/* Section badges with orange theme */
.shop-page section .inline-flex,
.delivery-page section .inline-flex,
.digital-menu-page section .inline-flex,
.booking-page section .inline-flex {
    transition: all 0.3s ease;
    background: rgba(255, 167, 38, 0.08);
    border: 1px solid rgba(255, 167, 38, 0.15);
    color: #FF7043;
}

.shop-page section .inline-flex:hover,
.delivery-page section .inline-flex:hover,
.digital-menu-page section .inline-flex:hover,
.booking-page section .inline-flex:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.15) 0%, rgba(255, 112, 67, 0.15) 100%);
}

/* Category cards with orange hover effects */
.shop-page a[href*="/category"],
.delivery-page a[href*="/category"],
.digital-menu-page a[href*="/category"] {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 167, 38, 0.1);
    transition: all 0.3s ease;
}

.shop-page a[href*="/category"]:hover,
.delivery-page a[href*="/category"]:hover,
.digital-menu-page a[href*="/category"]:hover {
    border-color: rgba(255, 167, 38, 0.3);
    box-shadow: 0 8px 24px rgba(255, 167, 38, 0.15);
}

.shop-page a[href*="/category"]::after,
.delivery-page a[href*="/category"]::after,
.digital-menu-page a[href*="/category"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFA726 0%, #FF7043 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.shop-page a[href*="/category"]:hover::after,
.delivery-page a[href*="/category"]:hover::after,
.digital-menu-page a[href*="/category"]:hover::after {
    transform: scaleX(1);
}

/* Product cards - ensure consistent orange theme */
.shop-page .product-card,
.delivery-page .product-card,
.digital-menu-page .product-card {
    border: 1px solid rgba(255, 167, 38, 0.1);
    background: rgba(255, 255, 255, 0.98);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shop-page .product-card:hover,
.delivery-page .product-card:hover,
.digital-menu-page .product-card:hover {
    border-color: rgba(255, 167, 38, 0.3);
    box-shadow: 0 12px 32px rgba(255, 167, 38, 0.15);
    transform: translateY(-6px);
}

/* Builder cards with orange gradient */
.shop-page .builder-card,
.delivery-page .builder-card,
.digital-menu-page .builder-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 167, 38, 0.1);
}

.shop-page .builder-card:hover,
.delivery-page .builder-card:hover,
.digital-menu-page .builder-card:hover {
    box-shadow: 0 20px 48px rgba(255, 167, 38, 0.25);
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 167, 38, 0.3);
}

/* Swiper navigation buttons - orange theme */
.shop-page .swiper-nav-btn,
.delivery-page .swiper-nav-btn,
.digital-menu-page .swiper-nav-btn,
.booking-page .swiper-nav-btn {
    background: rgba(255, 167, 38, 0.1);
    border: 1px solid rgba(255, 167, 38, 0.2);
    color: #FF7043;
    transition: all 0.3s ease;
}

.shop-page .swiper-nav-btn:hover,
.delivery-page .swiper-nav-btn:hover,
.digital-menu-page .swiper-nav-btn:hover,
.booking-page .swiper-nav-btn:hover {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%);
    border-color: #FFA726;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(255, 167, 38, 0.4);
}

/* Swiper pagination - orange theme */
.shop-page .swiper-pagination-bullet,
.delivery-page .swiper-pagination-bullet,
.digital-menu-page .swiper-pagination-bullet,
.booking-page .swiper-pagination-bullet {
    background: rgba(255, 167, 38, 0.3);
    opacity: 1;
}

.shop-page .swiper-pagination-bullet-active,
.delivery-page .swiper-pagination-bullet-active,
.digital-menu-page .swiper-pagination-bullet-active,
.booking-page .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%);
    width: 24px;
    border-radius: 6px;
}

/* Party badges - consistent orange */
.shop-page .party-badge,
.delivery-page .party-badge,
.digital-menu-page .party-badge,
.booking-page .party-badge {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%);
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: none;
    font-weight: 700;
}

/* Section backgrounds - consistent light style */
.shop-page section,
.delivery-page section,
.digital-menu-page section,
.booking-page section {
    scroll-margin-top: 80px;
    color: #1e293b;
}

/* Buttons - orange theme */
.shop-page .btn-primary,
.delivery-page .btn-primary,
.digital-menu-page .btn-primary,
.booking-page .btn-primary {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 167, 38, 0.25);
    transition: all 0.3s ease;
}

.shop-page .btn-primary:hover,
.delivery-page .btn-primary:hover,
.digital-menu-page .btn-primary:hover,
.booking-page .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(255, 167, 38, 0.4);
    transform: translateY(-2px);
}

/* Ensure slot chips use orange theme */
.slot-chip {
    background: rgba(255, 167, 38, 0.1);
    border: 1px solid rgba(255, 167, 38, 0.2);
    color: #FF7043;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.slot-chip-active,
.slot-chip:hover {
    background: linear-gradient(135deg, #FFA726 0%, #FF7043 100%);
    border-color: #FFA726;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
}

/* Empty state styling - dark text on light background */
.shop-page .text-center,
.delivery-page .text-center,
.digital-menu-page .text-center,
.booking-page .text-center {
    color: #1e293b;
}

/* Headings - consistent dark color */
.shop-page h1,
.shop-page h2,
.shop-page h3,
.shop-page h4,
.delivery-page h1,
.delivery-page h2,
.delivery-page h3,
.delivery-page h4,
.digital-menu-page h1,
.digital-menu-page h2,
.digital-menu-page h3,
.digital-menu-page h4,
.booking-page h1,
.booking-page h2,
.booking-page h3,
.booking-page h4 {
    color: #1e293b;
}

/* Link hover effects with orange */
.shop-page a[data-link]:not(.btn),
.delivery-page a[data-link]:not(.btn),
.digital-menu-page a[data-link]:not(.btn) {
    transition: color 0.3s ease;
    color: #1e293b;
}

.shop-page a[data-link]:not(.btn):hover,
.delivery-page a[data-link]:not(.btn):hover,
.digital-menu-page a[data-link]:not(.btn):hover {
    color: #FFA726;
}

/* Price tags - orange accent */
.shop-page .price,
.delivery-page .price,
.digital-menu-page .price,
.booking-page .price {
    color: #FF7043;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .shop-page section,
    .delivery-page section,
    .digital-menu-page section,
    .booking-page section {
        scroll-margin-top: 64px;
    }
}