Collection 1

<div class="chakra-collection-container">
    {% assign collection_handle = 'chakra-mugs' %}
    <h1 class="chakra-title">Explore Your Chakra Mugs</h1>
    <p class="chakra-description">Awaken your energy with our chakra-inspired color morphing mugs, perfect for meditation and mindfulness.</p>
    <div class="chakra-product-grid">
        {% for product in collections[collection_handle].products %}
            <div class="chakra-product-item">
                <a href="{{ product.url }}">
                    <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" class="chakra-product-image">
                    <h2 class="chakra-product-title">{{ product.title }}</h2>
                    <p class="chakra-product-price">{{ product.price | money }}</p>
                </a>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    .chakra-collection-container {
        text-align: center;
        padding: 20px;
        background: linear-gradient(120deg, #ff6b6b, #ffe066, #6bcfff);
    }
    .chakra-title {
        font-size: 2.5em;
        color: #ffffff;
        margin-bottom: 10px;
    }
    .chakra-description {
        font-size: 1.2em;
        color: #ffffff;
        margin-bottom: 20px;
    }
    .chakra-product-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    .chakra-product-item {
        width: 250px;
        text-align: center;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s;
    }
    .chakra-product-item:hover {
        transform: scale(1.05);
    }
    .chakra-product-image {
        width: 100%;
        height: auto;
    }
    .chakra-product-title {
        font-size: 1.5em;
        color: #333333;
        margin: 10px 0;
    }
    .chakra-product-price {
        font-size: 1.2em;
        color: #666666;
    }
</style>