/** Shopify CDN: Minification failed

Line 16:5 Unexpected "="
Line 25:11 Expected identifier but found "%"
Line 26:12 Unexpected "{"
Line 26:13 Expected identifier but found "%"
Line 27:14 Unexpected "<"
Line 30:60 Unexpected "{"
Line 30:63 Expected ":"
Line 30:79 Unexpected "<"
Line 33:39 Expected identifier but found "%"
Line 34:38 Unexpected "<"
... and 13 more hidden warnings

**/
<!-- ================= MAIN BANNER ================= -->
<section class="homepage-banner" style="margin:30px 0;">
  <a href="/collections/summer-dresses">
      <img src="{{ 'summer-banner.jpg' | asset_url }}" alt="Summer Collection" style="width:100%; height:auto; border-radius:10px;">
        </a>
        </section>

        <!-- ================= FEATURED COLLECTIONS ================= -->
        <section class="featured-collections" style="display:flex; gap:20px; margin:40px 0; flex-wrap:wrap;">
          {% assign collections_list = "women,men,accessories" | split: "," %}
            {% for c in collections_list %}
              <div class="collection-card" style="flex:1; min-width:250px; text-align:center;">
                  <a href="/collections/{{ c }}">
                        <img src="{{ c }}-collection.jpg" alt="{{ c | capitalize }}" style="width:100%; border-radius:10px; transition: transform 0.3s;">
                              <h3 style="margin-top:10px;">{{ c | capitalize }}</h3>
                                  </a>
                                    </div>
                                      {% endfor %}
                                      </section>

                                      <style>
                                        .collection-card:hover img {
                                            transform: scale(1.05);
                                              }
                                              </style>

                                              <!-- ================= BESTSELLER PRODUCTS GRID ================= -->
                                              <section class="bestsellers" style="margin:40px 0;">
                                                <h2 style="text-align:center; margin-bottom:20px;">Bestsellers</h2>
                                                  <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px;">
                                                      {% for product in collections['bestsellers'].products limit:8 %}
                                                            <div class="product-card" style="border:1px solid #ddd; padding:10px; text-align:center; border-radius:10px; transition: transform 0.3s;">
                                                                    <a href="{{ product.url }}">
                                                                              <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" style="width:100%; border-radius:5px;">
                                                                                        <h4 style="margin:10px 0 5px 0;">{{ product.title }}</h4>
                                                                                                  <p style="color:#555;">{{ product.price | money }}</p>
                                                                                                          </a>
                                                                                                                </div>
                                                                                                                    {% endfor %}
                                                                                                                      </div>
                                                                                                                      </section>

                                                                                                                      <style>
                                                                                                                        .product-card:hover {
                                                                                                                            transform: translateY(-5px);
                                                                                                                              }
                                                                                                                              </style>

                                                                                                                              <!-- ================= CTA BANNER ================= -->
                                                                                                                              <section class="cta-banner" style="margin:50px 0; text-align:center; background:#f7f7f7; padding:30px; border-radius:10px;">
                                                                                                                                <h2>Shop Our Summer Collection Now!</h2>
                                                                                                                                  <a href="/collections/summer-dresses" style="display:inline-block; margin-top:15px; padding:12px 25px; background:#ff4c3b; color:#fff; text-decoration:none; border-radius:5px;">Shop Now</a>
                                                                                                                                  </section>

                                                                                                                                  <!-- ================= MOBILE RESPONSIVE ================= -->
                                                                                                                                  <style>
                                                                                                                                    @media (max-width:768px){
                                                                                                                                        .featured-collections {
                                                                                                                                              flex-direction: column;
                                                                                                                                                    gap:20px;
                                                                                                                                                        }
                                                                                                                                                          }
                                                                                                                                                          </style>