@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap');

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar for horizontal sections if needed */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    background-color: #000;
}

.pre-i18n {
    visibility: hidden;
}

/* Smooth selection color */
::selection {
    background: #D9232A; /* FISK Red */
    color: white;
}

/* Navigation Text Color Change on Scroll */
/* We will handle this with JS if needed, but for now fixed style is OK */

.voice-agent-widget {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 80;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

.video-endframe-bottle {
    position: absolute;
    left: 50%;
    bottom: -2%;
    transform: translateX(-50%);
    max-height: 92vh;
    width: auto;
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.55));
    z-index: 1;
}

.video-endframe-bottle-glow {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    width: min(48vw, 560px);
    height: min(36vw, 420px);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(56, 189, 248, 0.18) 35%, rgba(0, 0, 0, 0) 75%);
    filter: blur(10px);
    z-index: 0;
}

.recipe-media-tall {
    height: 25.3rem;
}

.recipe-media-contain {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.75) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.recipe-media-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
}

.recipe-trim-bottom {
    clip-path: inset(0 0 3% 0);
}

.recipe-card-shell {
    max-width: 44.85rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.about-bottle-image {
    max-height: 108%;
    width: auto;
    object-fit: contain;
    transform: scale(1.02);
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.35));
    -webkit-mask-image: radial-gradient(ellipse 80% 92% at 50% 52%, #000 52%, rgba(0, 0, 0, 0.9) 66%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 92% at 50% 52%, #000 52%, rgba(0, 0, 0, 0.9) 66%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
}


@media (max-width: 768px) {
    #main-nav {
        padding: 0.75rem 1rem;
    }

    #home-logo > div {
        width: 3rem;
        height: 3rem;
    }

    #about {
        padding: 5rem 1rem;
        gap: 2rem;
    }

    #about h2 {
        font-size: 2.05rem;
        line-height: 1.05;
    }

    #about-bottle-wrap {
        height: 420px;
    }

    .recipe-media-tall {
        height: 21.85rem;
    }

    .about-bottle-image {
        max-height: 112%;
        transform: scale(1);
    }

    .recipe-card-shell {
        max-width: none;
    }

    #recipes,
    #buy,
    #instagram {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    #retailer-grid {
        gap: 1rem;
    }

    #main-ice-bg {
        background-attachment: scroll;
    }

    #video-controls {
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        gap: 6px;
    }

    #video-controls button {
        padding: 0.45rem 0.55rem;
        font-size: 11px;
    }

    .video-endframe-bottle {
        max-height: 80vh;
        bottom: 2%;
    }

    .video-endframe-bottle-glow {
        width: 78vw;
        height: 58vw;
        bottom: 12%;
    }

    .voice-agent-widget {
        left: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        transform: scale(0.94);
        transform-origin: bottom left;
    }
}