/* NUTRIPOP — Homepage-only styles (.home-page). Loaded only on index.html. */

.home-page .coll-section,
.home-page .home-best-section,
.home-page .home-story-section,
.home-page .home-features-section,
.home-page .faq-section {
    position: relative;
    border-top: 1px solid rgba(216,226,236,.09);
}

.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after {
    content: "✦";
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 24px;
    transform: translate(-50%, -50%);
    color: #d7e3ee;
    background: #101419;
    font-size: .74rem;
    letter-spacing: .08em;
    box-shadow: -76px 0 0 -75px rgba(216,226,236,.42), 76px 0 0 -75px rgba(216,226,236,.42);
    z-index: 3;
}

.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after { color: var(--gold-bright); }

@media (max-width: 680px) {
.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after { width: 42px; }
}

.home-page {
    color: var(--text-primary) !important;
    background: var(--bg-base) !important;
}

.home-page .nav {
    background: rgba(9,11,13,.88) !important;
    border-color: var(--border-subtle) !important;
    backdrop-filter: blur(18px) saturate(120%);
}

.home-page { background: #0b0d0b !important; }

.home-page .nav { border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(11,13,11,0.76); backdrop-filter: blur(18px); }

.home-page .nav.scrolled { background: rgba(11,13,11,0.96); }

.home-page .hero-section { height: min(780px, 90vh); min-height: 600px; }

.home-page .slide-overlay { background: linear-gradient(90deg, rgba(8,10,8,0.92) 0%, rgba(8,10,8,0.64) 45%, rgba(8,10,8,0.16) 100%); }

.home-page .slide-content { max-width: 1240px; margin: 0 auto; padding: 0 56px; }

.home-page .slide-text { max-width: 650px; }

.home-page .slide-text h1 { letter-spacing: -0.04em; line-height: 0.96; }

.home-page .slide-text h2 { letter-spacing: -0.025em; }

.home-page .btn-brand { color: #10200c !important; background: var(--gold-bright) !important; box-shadow: 0 14px 32px rgba(193,222,119,0.16); }

.home-page .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(193,222,119,0.25); }

.home-page .cat-grid { gap: 18px; }

.home-page .cat-card { border: 1px solid var(--gold-line); border-radius: 14px; background: var(--card-bg); box-shadow: none; transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), border-color 0.4s ease, box-shadow 0.4s ease; }

.home-page .cat-card:hover { transform: translateY(-8px); border-color: var(--gold-line-hi); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }

.home-page .cat-card-overlay { padding: 28px; background: linear-gradient(to top, rgba(6,7,5,0.95) 0%, rgba(6,7,5,0.42) 58%, transparent 100%); }

.home-page .cat-explore { color: var(--gold-bright); font-weight: 700; letter-spacing: 0.14em; }

@media (max-width: 720px) {
.home-page .hero-section { min-height: 620px; height: 82vh; }
.home-page .slide-content { padding: 0 24px; }
.home-page .cat-grid { gap: 14px; }
}

.home-page > *:not(#home-canvas) { position: relative; z-index: 2; }

.home-page .nav { z-index: 1000; }

@media (max-width: 768px) {
.home-page .home-quickshop-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0 -20px;
        padding: 4px 20px 12px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
.home-page .home-quickshop-grid .cat-card {
        flex: 0 0 min(70vw, 260px);
        width: min(70vw, 260px);
        min-height: 0;
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
.home-page .home-quickshop-grid .cat-card-overlay { padding: 18px; }
.home-page .home-quickshop-grid::-webkit-scrollbar { height: 4px; }
.home-page .home-quickshop-grid::-webkit-scrollbar-thumb { background: var(--gold-line-hi); border-radius: 99px; }
}

@media (max-width: 480px) {
.home-page .home-quickshop-grid { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; scroll-padding-left: 18px; }
}

.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after { content: "✦"; position: absolute; top: 0; left: 50%; display: grid; place-items: center; width: 54px; height: 24px; transform: translate(-50%,-50%); color: #d7e3ee; background: #101419; font-size: .74rem; z-index: 3; }

@media (max-width:680px) {
.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after { width:42px; }
}

.home-page .coll-section::after,
.home-page .home-best-section::after,
.home-page .home-story-section::after,
.home-page .home-features-section::after,
.home-page .faq-section::after { content: none !important; }

.home-page .nav {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.home-page { background: #0b0d0b; }

.home-page .slide-overlay--chef { background: linear-gradient(to bottom, rgba(10,12,18,0.55), rgba(5,8,14,0.75)); }

.home-page .cat-explore--spice { color: #ff8a3d; }

.home-page .cat-explore--tea { color: #3ddc84; }

.home-page .cat-explore--chef { color: #a0aec0; }