/* Reset and Typography */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* Modern safety net that doesn't break sticky */
}

body {
    overflow-x: clip; 
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove tap highlights on mobile with maximum priority */
a, button, input, select, textarea, [tabindex], .nav-link, * {
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove default focus outline for mouse clicks */
*:focus:not(:focus-visible), a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
    outline: none !important;
}

/* Ensure focus-visible works for keyboard access */
*:focus-visible {
    outline: 2px solid var(--accent-orange, #c86b45) !important;
    outline-offset: 2px !important;
}

:root {
    --bg-color: #fdf6ec;
    --text-primary: #3d2115;
    --text-secondary: #574c49;
    --accent-orange: #c86b45;
    --btn-gradient: linear-gradient(135deg, #d3734e, #bd4e2e);
    --btn-shadow: 0 10px 24px rgba(204, 99, 63, 0.4);
    --border-color: #e6d3c2;
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-cursive: 'Yellowtail', cursive;
}

body {
    background: radial-gradient(circle at top right, #fbf1e0 0%, #fdf6ec 50%, #fdf6ec 100%);
    background-attachment: fixed;
    background-size: cover;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    min-height: 100vh;
}

/* Background Decorations */
.blob-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.blob-bottom-right {
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 600px;
    height: 400px;
    border-radius: 50%;
    background: #f7ede0;
    filter: blur(40px);
    transform: rotate(-15deg);
}

.blob-bottom-right::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    background-color: transparent;
    border: 150px solid rgba(243, 227, 210, 0.5);
    border-right-color: transparent;
    border-top-color: transparent;
    border-radius: 50%;
    left: -50%;
    top: -20%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    overflow-x: clip; /* Inner safety net */
    width: 100%;
    box-sizing: border-box;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    padding: 32px 0 48px 0;
}

.nav-left {
    display: flex;
    gap: 36px;
    margin-left: 20px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--accent-orange);
    transform: scale(1.05);
}

.nav-link.active {
    color: var(--accent-orange);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.login-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
}

/* Buttons */
.btn {
    text-decoration: none;
    display: inline-block;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}

.btn-sm {
    padding: 10px 28px;
    font-size: 14px;
}

.btn-primary {
    background: var(--btn-gradient);
    color: #ffffff;
    box-shadow: var(--btn-shadow);
    padding: 16px 36px;
    font-size: 16px;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 28px rgba(204, 99, 63, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    padding: 14.5px 34.5px;
    /* offset by border width */
    font-size: 16px;
}

.btn-secondary:hover {
    background: rgba(230, 211, 194, 0.2);
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 60px;
}

/* Left Column */
.hero-content {
    flex: 1.2;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.subtitle {
    font-family: var(--font-cursive);
    color: var(--accent-orange);
    font-size: 34px;
    margin-bottom: 8px;
    transform: rotate(-2deg);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(200, 107, 69, 0.1);
}

.title {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
    letter-spacing: -0.1px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Right Column */
.hero-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
}

.hero-main-logo {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.15));
    animation: floating 6s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.hero-main-logo:hover {
    /* We use a slightly larger scale that combines with the floating if possible, 
       but for simplicity we just scale it up. The animation will continue 
       but its transform might be overridden depending on how we define it.
       To keep it simple, we just scale. */
    transform: scale(1.05);
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.hero-glow-top {
    position: absolute;
    width: 250px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(255, 220, 130, 0.4) 0%, rgba(255, 200, 100, 0.1) 40%, transparent 70%);
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    filter: blur(30px);
    pointer-events: none;
}






/* Products Section */
.products-section {
    padding: 80px 0 30px 0;
    position: relative;
    z-index: 1;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: rgba(253, 245, 234, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px;
    border-radius: 999px;
    width: fit-content;
    margin: 80px auto 60px auto;
    box-shadow: inset 0 2px 4px rgba(230, 210, 195, 0.2), 0 4px 10px rgba(240, 225, 210, 0.4);
    position: sticky;
    top: 20px;
    z-index: 100;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tab-btn:hover:not(.active) {
    transform: scale(1.05);
    color: var(--accent-orange);
}

.tab-btn.active {
    background: #bd5c3b;
    color: #fff;
    box-shadow: 0 4px 12px rgba(189, 92, 59, 0.4);
}

.section-title {
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Products Container */
.products-container {
    display: flex;
    gap: 24px;
    position: relative;
    align-items: stretch;
}

/* Background blob */
.blob-left-center {
    position: absolute;
    width: 250px;
    height: 350px;
    background: #bd5c3b;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    left: -80px;
    top: 50%;
    transform: translateY(-50%) rotate(10deg);
    z-index: -1;
}

/* Main Card */
.main-card {
    flex: 1.25;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(210, 190, 175, 0.3);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.main-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 32px 64px rgba(210, 190, 175, 0.4);
}

.main-card:hover .product-img {
    transform: scale(1.08);
}

.main-card-image-area {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 215, 180, 0.6) 0%, rgba(255, 230, 205, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    padding: 60px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

/* Best seller badge */
.bestseller-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: #ffebb8;
    color: #4a3811;
    padding: 8px 16px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bestseller-badge span {
    color: #f5a623;
    font-size: 16px;
    line-height: 1;
}

.main-placeholder {
    height: 200px;
    width: 100%;
    max-width: 300px;
    background: #f0e6dc;
    border: 2px dashed #dcbca0;
    border-radius: 16px;
}

.main-card-content {
    padding: 32px;
    background: rgba(255, 255, 255, 0.85);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-card-title {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.main-card-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 28px;
}

.main-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.main-card-tags {
    display: flex;
    gap: 12px;
}

.tag {
    background: #fcf4e8;
    color: #8c7365;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: default;
}

.tag:hover {
    transform: scale(1.05);
    background: #fdf1cd;
    color: var(--accent-orange);
}

.btn-order {
    padding: 14px 28px;
    font-size: 15px;
    background: #bd5c3b;
    color: white;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(189, 92, 59, 0.3);
    transition: all 0.2s;
}

.btn-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(189, 92, 59, 0.4);
}

/* Right Grid */
.small-cards-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}

.small-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 40px rgba(210, 190, 175, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.small-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 28px 56px rgba(210, 190, 175, 0.3);
}

.small-card:hover .product-img {
    transform: scale(1.1);
}

.small-placeholder {
    height: 120px;
    width: 100%;
    max-width: 160px;
    background: #f0e6dc;
    border: 2px dashed #dcbca0;
    border-radius: 12px;
    margin-bottom: 20px;
}

.small-card-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.small-card-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    opacity: 0.8;
}

.fm-card-desc {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
    opacity: 0.8;
}




/* Sladké Section Row Layout */
.sweet-items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 1024px) {
    .sweet-items-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sweet-items-grid {
        grid-template-columns: 1fr !important;
    }

    .products-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .lm-content {
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }
}


.pc-image-area {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pc-graphics {
    position: relative;
    width: 760px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.pc-img-churros,
.pc-img-pancakes,
.pc-img-waffle {
    width: 234px;
    height: 234px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 30px 25px rgba(60, 30, 15, 0.22)) drop-shadow(0 12px 10px rgba(60, 30, 15, 0.12));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        filter 0.4s ease;
    cursor: pointer;
}

.pc-img-churros:hover,
.pc-img-pancakes:hover {
    transform: scale(1.15) translateY(-12px);
    filter: drop-shadow(0 40px 30px rgba(60, 30, 15, 0.28)) drop-shadow(0 16px 12px rgba(60, 30, 15, 0.15));
}

.pc-img-waffle:hover {
    transform: scale(1.15) translateY(-12px);
    filter: drop-shadow(0 40px 30px rgba(60, 30, 15, 0.28)) drop-shadow(0 16px 12px rgba(60, 30, 15, 0.15));
}

.pc-placeholder-tall {
    width: 100px;
    height: 320px;
    background-color: #000000;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    transform: translateY(-5px);
}

.pc-placeholder-wide {
    width: 140px;
    height: 260px;
    background-color: #000000;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    transform: translateY(-20px);
}




/* Festival Menu Section */
.festival-menu-section {
    position: relative;
    padding: 60px 0;
    z-index: 1;
}

.drinks-indivi-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 2rem;
    position: relative;
    z-index: 10;
    width: 100%;
}

.drinks-indivi-row img {
    height: 480px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.15));
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    flex: 0 0 auto;
    z-index: 2;
}

.drinks-indivi-row img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
}

.fm-blob-left {
    position: absolute;
    top: 40px;
    left: calc(50% - 50% - 80px);
    width: 280px;
    height: 480px;
    background: #f4dcc2;
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
    z-index: -1;
}

.fm-blob-top {
    position: absolute;
    top: -80px;
    left: 45%;
    width: 500px;
    height: 200px;
    background: #fba990;
    filter: blur(80px);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
    transform: translateX(-50%);
}

.fm-title {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.fm-cards-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.fm-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(210, 190, 175, 0.25);
    flex: 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.fm-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 22px 48px rgba(210, 190, 175, 0.35);
}

.fm-card:hover .product-img {
    transform: scale(1.1);
}

.fm-image-placeholder {
    width: 100%;
    height: 150px;
    background: #f5ece4;
    /* lighter brown/beige to match the site */
    border-radius: 12px;
    margin-bottom: 20px;
}

.fm-card-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}




/* Footer Section */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 0 40px 0;
    margin-top: 20px;
    border-top: 1px solid rgba(230, 211, 194, 0.6);
}

.footer-logo {
    font-family: var(--font-cursive);
    color: var(--accent-orange);
    font-size: 36px;
    line-height: 0.85;
    transform: rotate(-2deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

.footer-logo:hover {
    transform: rotate(-5deg) scale(1.1);
}

.footer-socials {
    display: flex;
    gap: 28px;
    align-items: center;
}

.social-link {
    color: #b5603c;
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover {
    transform: translateY(-4px) scale(1.2);
    color: var(--text-primary);
}

.social-link svg {
    width: 100%;
    height: 100%;
}

.footer-copy {
    text-align: right;
    font-family: var(--font-sans);
}

.footer-copy strong {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 700;
}

.footer-copy span {
    color: #a38976;
    font-size: 13px;
    display: block;
    margin-top: 4px;
}

/* Contact Cards Hover/Click Effect */
.contact-card {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 20px 40px;
    border-radius: 999px;
    box-shadow: 0 15px 35px rgba(210, 190, 175, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(230, 211, 194, 0.4);
    position: relative;
    overflow: hidden;
}

.contact-card svg {
    stroke: #c86b45;
    transition: stroke 0.3s ease;
}

.contact-card span {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.contact-card:hover,
.contact-card:active {
    background: #c86b45 !important;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 45px rgba(200, 107, 69, 0.25);
    border-color: #c86b45;
}

.contact-card:hover svg,
.contact-card:active svg {
    stroke: #ffffff !important;
}

.contact-card:hover span,
.contact-card:active span {
    color: #ffffff !important;
}




/* Lemonade Section */
.lemonade-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 80px 0;
    position: relative;
    gap: 44px;
    overflow: hidden;
}

.lm-glow {
    position: absolute;
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(253, 230, 138, 0.35) 0%, rgba(253, 246, 236, 0) 70%);
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    filter: blur(60px);
    pointer-events: none;
}

.lm-content {
    max-width: 550px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.lm-subtitle {
    font-family: var(--font-cursive);
    color: var(--accent-orange);
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
    transform: rotate(-2deg);
    text-shadow: 0 1px 2px rgba(200, 107, 69, 0.1);
}

.lm-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 800;
    color: #3d2215;
    margin-bottom: 16px;
    letter-spacing: -1px;
    line-height: 1.15;
}

.lm-desc {
    font-size: 16px;
    color: #574c49;
    line-height: 1.65;
    margin-bottom: 24px;
}

.lm-flavors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: center;
    align-items: center;
}

.lm-flavor {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
}

.lm-flavor-sep {
    color: #d4c4b8;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.lm-dot-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.lm-interactive-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 550px;
    margin: 40px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 10;
}

.lm-drink-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 50px;
    will-change: transform, opacity;
}

.lm-drink-img {
    height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.lm-drink-img:hover {
    transform: translateY(-10px) scale(1.05) !important;
}

/* Explicit Depth Ordering */
.lm-limetka {
    z-index: 5;
}

.lm-malina,
.lm-mango {
    z-index: 4;
}

.lm-citron,
.lm-levandula {
    z-index: 3;
}

.lm-label-pill {
    background: #ffffff;
    border: 1px solid rgba(230, 230, 230, 0.8);
    padding: 10px 18px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-top: 32px;
    opacity: 0;
    transform: scale(0.5);
}

.lm-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .lm-glow {
        display: none;
    }

    .lm-interactive-container {
        height: 300px;
        margin-top: 20px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .lm-drink-wrapper {
        bottom: 20px;
    }

    .lm-drink-img {
        height: 180px;
    }

    .lm-label-pill {
        padding: 4px 8px;
        font-size: 10px;
        gap: 6px;
        margin-top: 24px;
    }
}




/* Scroll Animations */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition-delay: 0s !important;
}

.fade-bottom {
    transform: translateY(30px);
}

.fade-left {
    transform: translateX(-30px);
}

.fade-right {
    transform: translateX(30px);
}

.scale-up {
    transform: scale(0.95);
}

/* Stagger delay for children if needed */
.reveal-stagger>*:nth-child(1) {
    transition-delay: 0.1s;
}

.reveal-stagger>*:nth-child(2) {
    transition-delay: 0.2s;
}

.reveal-stagger>*:nth-child(3) {
    transition-delay: 0.3s;
}

.reveal-stagger>*:nth-child(4) {
    transition-delay: 0.4s;
}

.reveal-stagger>*:nth-child(5) {
    transition-delay: 0.5s;
}

/* Highlight Animation */
.highlight-pop {
    animation: highlightPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes highlightPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

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

/* Ensure product images can be animated without interfering with existing transforms */
.product-img {
    transition: transform 0.3s ease;
}

@keyframes highlightPopComplex {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

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

.highlight-pop-complex {
    animation: highlightPopComplex 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Bento Grid Layout for Party Servis */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.bento-card {
    background: #ffffff;
    /* Footer will be white, container should be white too for safety */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(210, 190, 175, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bento-card:not(.dj-card):hover {
    transform: none;
    box-shadow: 0 24px 48px rgba(210, 190, 175, 0.3);
}

.bento-card.dj-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 32px 64px rgba(210, 190, 175, 0.4);
}

.bento-title {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background: #ffffff;
    padding: 24px;
    border-radius: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
    box-shadow: none;
    z-index: 10;
    backdrop-filter: none;
    pointer-events: auto;
    text-align: center;
    width: 100%;
}


.bento-info {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 15px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    z-index: 5;
    pointer-events: none;
}

.bento-info-top {
    top: 25px;
}

.bento-info-bottom {
    bottom: 25px;
}

.bento-info-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.bento-info-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-orange);
}

.bento-images {
    display: flex;
    width: 100%;
    flex: 1 1 0;
    /* Grow to fill space, shrink if needed, base 0 */
    background: #fcf4e8;
    /* Default beige background for the top part */
    min-height: 0;
}


.bento-img-wrapper {
    flex: 1 1 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 215, 180, 0.4) 0%, rgba(255, 230, 205, 0.2) 100%);
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align images to the bottom */
    align-items: center;
    min-height: 0;
    min-width: 0;
}


.bento-img-wrapper:last-child {
    border-right: none;
}

.bento-img-placeholder {
    width: 100%;
    height: 90%;
    max-height: 90%;
    object-fit: contain;
    padding: 30px 30px 0 30px;
    /* Remove bottom padding to sit flush */
    transition: transform 0.6s ease, scale 0.6s ease;
}


.bento-img-wrapper:hover .bento-img-placeholder {
    scale: 1.08;
}

/* Specific Card Placements */
.bento-item-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-item-2 {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-item-3 {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-item-4 {
    grid-column: span 4;
    grid-row: span 2;
}

.bento-item-5 {
    grid-column: span 4;
    grid-row: span 2;
}


/* --- Mobile Responsiveness --- */

@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .hero-main-logo {
        max-width: 450px;
    }
}

@media (max-width: 768px) {

    /* Navbar */
    .navbar {
        padding: 24px 0 16px 0;
        gap: 20px;
    }

    .nav-link {
        font-size: 14px;
    }

    /* Hero Section */
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding-bottom: 40px;
    }

    .hero-content {
        padding-left: 0;
        align-items: center;
    }

    .title {
        font-size: 36px;
    }

    .subtitle {
        display: none;
    }

    .description {
        font-size: 15px;

        br {
            display: none;
        }

        /* Allow text to wrap naturally on mobile */
    }

    .hero-image-wrapper {
        min-height: auto;
        order: -1;
        margin-top: 40px;
    }

    .hero-main-logo {
        max-width: 280px;
    }

    /* Category Tabs - Horizontal Scroll */
    .category-tabs {
        position: relative;
        top: auto;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding: 6px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
        margin: 0 auto 40px auto;
        border-radius: 999px;
    }

    .category-tabs::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .tab-btn {
        white-space: nowrap;
        padding: 10px 20px;
        font-size: 12px;
    }

    /* Products Section */
    .products-container {
        flex-direction: column;
    }

    .blob-left-center {
        display: none;
    }

    .main-card-image-area {
        padding: 40px 20px;
        min-height: 220px;
    }

    .main-card-title {
        font-size: 22px;
    }

    .small-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .small-card {
        padding: 24px 16px;
    }

    /* Bento Grid Mobile */
    .bento-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        margin-bottom: 0;
        padding: 10px;
        gap: 20px;
        grid-auto-rows: auto;
    }

    .bento-card {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .bento-images {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .bento-img-wrapper {
        width: 100%;
        flex-direction: column !important;
        gap: 15px !important;
        min-height: 250px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding-bottom: 20px;
    }

    .bento-img-wrapper:last-child {
        border-bottom: none;
    }

    .bento-info-static {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .bento-info-value {
        font-size: 22px !important;
    }

    .bento-info-label {
        font-size: 16px !important;
        height: auto !important;
    }

    .bento-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .bento-img-placeholder {
        max-height: 180px;
        padding: 15px;
    }


    /* Pancake Section */
    .pancake-section {
        flex-direction: column;
        text-align: center;
        padding: 60px 0;
        gap: 40px;
    }

    .pc-content {
        padding-right: 0;
        max-width: 100%;
    }

    .pc-title {
        font-size: 30px;
    }

    .pc-graphics {
        width: 100%;
        max-width: 400px;
        height: 300px;
        margin: 0 auto;
        transform: scale(0.9);
    }

    .pc-img-churros,
    .pc-img-pancakes,
    .pc-img-waffle {
        width: 140px;
        height: 140px;
    }

    /* Festival Menu */
    .fm-cards-container {
        flex-wrap: wrap;
        gap: 16px;
    }

    .fm-card {
        flex: 1 1 calc(50% - 8px);
    }

    .fm-blob-left,
    .fm-blob-top {
        display: none;
    }

    /* Lemonades */
    .lm-title {
        font-size: 32px;
    }

    .lm-labels {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
        margin-top: 24px;
        padding: 0;
    }

    .lm-label-item {
        padding: 4px 6px;
        font-size: 9px;
        gap: 4px;
    }

    /* Footer */
    .site-footer {
        flex-direction: column;
        gap: 32px;
        text-align: center;
        padding: 40px 0;
    }

    .footer-copy {
        text-align: center;
    }

    .social-link {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 32px;
    }

    .small-cards-grid {
        grid-template-columns: 1fr;
    }

    .fm-card {
        flex: 1 1 100%;
    }

    .main-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-logo {
        font-size: 32px;
    }
}

/* --- MOBILE BENTO GRID FINAL OVERRIDES --- */
@media screen and (max-width: 768px) {

    /* 1. Let the grid rows expand to fit content */
    .bento-grid {
        grid-auto-rows: auto !important;
    }

    /* 2. Main Card Fixes: layout, and strict border clipping for iOS/Safari */
    .bento-card {
        display: flex !important;
        flex-direction: column !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        transform: translateZ(0) !important;
    }

    /* 3. Move titles to top and manually curve the corners to prevent bleeding */
    .bento-title {
        order: -1 !important;
        border-bottom: 2px solid rgba(230, 211, 194, 0.4) !important;

        /* Force the background to white and explicitly round the top corners */
        background-color: #ffffff !important;
        border-top-left-radius: 32px !important;
        border-top-right-radius: 32px !important;

        margin: 0 !important;
        z-index: 1 !important;
    }

    /* 4. Stop the images container from collapsing to zero height */
    .bento-images {
        flex-direction: column !important;
        flex: none !important;
        height: auto !important;
    }

    /* 5. Give each image section its own vertical space and borders */
    .bento-img-wrapper {
        min-height: 280px !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
        padding: 30px 10px !important;
    }

    /* Remove the border from the very last item in a card */
    .bento-img-wrapper:last-child {
        border-bottom: none !important;
    }

    /* 6. Ensure images fit properly inside the new layout */
    .bento-img-placeholder {
        max-height: 180px !important;
        padding: 0 !important;
    }

    /* --- SPECIFIC SECTION LAYOUT TWEAKS (MOBILE ONLY) --- */
    @media screen and (max-width: 768px) {

        /* 1. Force these specific wrappers to be a ROW (Text Left, Image Right) */
        .bento-item-1 .bento-img-wrapper:first-child,
        /* 1st Grill */
        .bento-item-2 .bento-img-wrapper,
        /* Výčap */
        .bento-item-3 .bento-img-wrapper:first-child,
        /* Varník */
        .bento-item-3 .bento-img-wrapper:nth-child(2),
        /* Kávovar */
        .bento-item-5 .bento-img-wrapper

        /* All Fritézy */
            {
            flex-direction: row !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 20px !important;
        }

        /* 2. Lock the text to the left for these items */
        .bento-item-1 .bento-img-wrapper:first-child .bento-info-static,
        .bento-item-2 .bento-img-wrapper .bento-info-static,
        .bento-item-3 .bento-img-wrapper:first-child .bento-info-static,
        .bento-item-3 .bento-img-wrapper:nth-child(2) .bento-info-static,
        .bento-item-5 .bento-img-wrapper .bento-info-static {
            text-align: left !important;
            margin: 0 !important;
            flex: 1 !important;
            /* Take up half the space */
        }

        /* 3. Push the images to the right */
        .bento-item-1 .bento-img-wrapper:first-child .bento-img-placeholder,
        .bento-item-2 .bento-img-wrapper .bento-img-placeholder,
        .bento-item-3 .bento-img-wrapper:first-child .bento-img-placeholder,
        .bento-item-3 .bento-img-wrapper:nth-child(2) .bento-img-placeholder,
        .bento-item-5 .bento-img-wrapper .bento-img-placeholder {
            flex: 1 !important;
            /* Take up the other half */
            padding: 0 10px !important;
        }

        /* 4. Make the 2nd Grill smaller */
        /* 2nd Grill: Vertical stack with right-aligned text */
        .bento-item-1 .bento-img-wrapper:nth-child(2) {
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important; /* Center the column contents */
            padding: 30px !important;
            min-height: 300px !important;
        }

        .bento-item-1 .bento-img-wrapper:nth-child(2) .bento-img-placeholder {
            max-height: 80px !important;
            margin-bottom: 20px !important;
            width: auto !important;
            flex: none !important;
        }

        .bento-item-1 .bento-img-wrapper:nth-child(2) .bento-info-static {
            text-align: right !important;
            width: 100% !important;
            margin: 0 !important;
            flex: none !important;
        }

        /* 5. Enlarge the Fritézy images slightly */
        .bento-item-5 .bento-img-wrapper .bento-img-placeholder {
            flex: 1.2 !important;
            /* Give them a bit more room */
            max-height: 200px !important;
            transform: scale(1.05) translateX(-5px) !important;
            /* Scale them up, shift left to prevent right overflow */
        }

        /* 5b. Push the 2nd and 3rd Fritéza images to the right to align with the first */
        .bento-item-5 .bento-img-wrapper:nth-child(2) .bento-img-placeholder,
        .bento-item-5 .bento-img-wrapper:nth-child(3) .bento-img-placeholder {
            margin-left: auto !important;
            transform: scale(1.05) translateX(20px) !important;
        }

        /* 6. Push Varník image to the right */
        .bento-item-3 .bento-img-wrapper:first-child .bento-img-placeholder {
            margin-left: auto !important;
            transform: scale(1.4) translateX(10%) !important;
        }

        /* 7. Push Výčap image to the right edge (flush with 20px padding border) */
        .bento-item-2 .bento-img-wrapper .bento-img-placeholder {
            margin-left: auto !important;
            padding-right: 0 !important;
            transform: translateX(10%) !important;
        }
    }

    /* --- FIX LEMONADE LABEL OVERLAP ON MOBILE --- */
    @media screen and (max-width: 768px) {

        /* 1. Take labels out of the document flow so they CANNOT push the cups */
        .lm-label-pill {
            position: absolute !important;
            margin-top: 0 !important;
            /* Default perfectly centered */
            left: 0 !important;
            right: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: max-content !important;
        }

        /* 2. Outer labels */
        .lm-citron .lm-label-pill {
            top: calc(100% - 10px) !important;
        }

        /* Levanduľa with your perfect 10px adjustment */
        .lm-levandula .lm-label-pill {
            top: calc(100% - 10px) !important;
            left: 10px !important;
            right: -10px !important;
        }

        /* 3. Moved UP to be tighter against the outer labels */
        .lm-malina .lm-label-pill,
        .lm-mango .lm-label-pill {
            top: calc(100% + 2px) !important;
        }

        /* 4. Moved UP to tuck nicely under Malina and Mango */
        .lm-limetka .lm-label-pill {
            top: calc(100% + 18px) !important;
        }

        /* Reduced container padding */
        .lm-interactive-container {
            padding-bottom: 40px !important;
        }

    }

}

/* --- DJ CARD MOBILE OPTIMIZATION --- */
@media screen and (max-width: 768px) {
    #rytmus-noci-section {
        min-height: auto !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        border-radius: 32px !important;
        -webkit-mask-image: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #rytmus-noci-section .bento-info-static {
        padding: 60px 24px 0px 24px !important;
        order: 1 !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        flex: none !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #rytmus-noci-section .subtitle {
        margin-bottom: 12px !important;
    }

    #rytmus-noci-section .title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 24px !important;
    }

    #rytmus-noci-section .description {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 10px !important;
    }

    .dj-tags-container {
        display: none !important;
    }

    #rytmus-noci-section .tag {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        background: #fcf4e8 !important;
        border: none !important;
        color: #8c7365 !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    #rytmus-noci-section div[style*="flex: 1"] {
        height: 500px !important;
        width: 100% !important;
        flex: none !important;
        order: 2 !important;
        margin-top: -40px !important;
        z-index: 1 !important;
        position: relative !important;
    }

    #rytmus-noci-section img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}