:root {
        --forest-green: #2d6a3e;
        --accent-lime: #a3e635;
        --soft-bg: #f8fafb;
        --card-shadow: 0 10px 30px rgba(0,0,0,0.04);
    }

    body { 
        background-color: var(--soft-bg);
        font-family: 'Inter', -apple-system, sans-serif;
        color: #333;
        overflow-x: hidden;
    }

    /* --- 1. PREMIUM HERO & LIVE WAVES --- */
    .market-hero {
        background: #fff;
        padding: 80px 0 160px; /* Space for the deep waves */
        position: relative;
        overflow: hidden;
        text-align: center;
        margin-top:200px;
    }

    .hero-title {
        font-size: 3rem;
        font-weight: 900;
        color: var(--forest-green);
        letter-spacing: -1.5px;
        margin-bottom: 10px;
    }

    .wave-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150px;
        line-height: 0;
    }

    .premium-waves {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Parallax Animation for "Live" effect */
    .parallax > use {
        animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    }
    .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; fill: rgba(45, 106, 62, 0.08); }
    .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: rgba(45, 106, 62, 0.04); }
    .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: rgba(255, 255, 255, 0.4); }
    .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: var(--soft-bg); }

    @keyframes move-forever {
        0% { transform: translate3d(-90px, 0, 0); }
        100% { transform: translate3d(85px, 0, 0); }
    }

    /* --- 2. STICKY GLASS FILTER BAR --- */
    .filter-nav {
        position: sticky;
        top: 20px;
        z-index: 1000;
        margin: -45px auto 50px;
        width: fit-content;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 12px 35px;
        border-radius: 100px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        border: 1px solid rgba(45, 106, 62, 0.1);
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .filter-nav select {
        border: none;
        background: transparent;
        font-weight: 700;
        color: var(--forest-green);
        cursor: pointer;
        outline: none;
        font-size: 0.9rem;
    }

    /* --- 3. COMMODITY DATA CARDS --- */
    .market-container {
        max-width: 950px;
        margin: 0 auto 100px;
    }

    .commodity-row {
        background: #fff;
        border-radius: 20px;
        padding: 15px 30px;
        margin-bottom: 15px;
        display: grid;
        grid-template-columns: 75px 1fr 180px 160px;
        align-items: center;
        gap: 25px;
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid transparent;
    }

    .commodity-row:hover {
        transform: translateY(-3px);
        border-color: var(--forest-green);
        box-shadow: var(--card-shadow);
    }

    /* CLICK-TO-EXPAND LIGHTBOX IMAGE */
    .img-frame {
        width: 65px;
        height: 65px;
        border-radius: 14px;
        overflow: hidden;
        background: #eee;
        cursor: pointer;
        z-index: 10;
    }

    .img-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* The Expansion State */
    .img-frame.active img {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 480px; /* Large center display */
        height: 480px;
        z-index: 9999;
        border-radius: 30px;
        border: 10px solid white;
        box-shadow: 0 0 0 2000px rgba(0,0,0,0.7); /* Background Dim */
        object-fit: contain;
        background: #000;
    }

    .price-display {
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--forest-green);
        text-align: right;
    }

    .location-label {
        background: #f1f5f2;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 700;
        color: #444;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .meta-tag {
        font-size: 0.75rem;
        color: #999;
        margin-top: 3px;
    }

    .refresh-btn {
        color: var(--forest-green);
        cursor: pointer;
        transition: 0.3s;
    }
    .refresh-btn:hover { transform: rotate(120deg); }