/** Shopify CDN: Minification failed

Line 16:45 Unexpected "-->"
Line 18:3 Expected identifier but found "%"
Line 19:4 Unexpected "<"
Line 24:3 Expected identifier but found "%"
Line 26:20 Unexpected "-->"
Line 28:70 Unexpected "{"
Line 28:82 Expected ":"
Line 28:91 Unexpected "<"
Line 29:5 Expected identifier but found "%"
Line 30:6 Unexpected "<"
... and 6 more hidden warnings

**/
<!-- FULL-WIDTH HORIZONTAL COLLECTION BANNER -->
<div class="collection-horizontal-banner" style="position:relative; width:100vw; max-width:100vw; margin:0; overflow:hidden; height:300px; left:0; right:0;">
  {% if collection.image %}
    <img 
      src="{{ collection.image | img_url: '2000x' }}" 
      alt="{{ collection.title }}" 
      style="width:100%; height:100%; object-fit:cover; display:block;"
    >
  {% endif %}
  
  <!-- TEXT OVERLAY -->
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; color:#fff; max-width:80%;">
    <h1 style="font-size:28px; font-weight:700; margin-bottom:10px;">{{ collection.title }}</h1>
    {% if collection.description != blank %}
      <p style="font-size:16px; line-height:1.6; margin-bottom:20px;">{{ collection.description }}</p>
    {% endif %}
    
    <!-- CTA BUTTON -->
    <a href="{{ collection.url }}" 
       style="display:inline-block; background-color:#ffffff; color:#000000; padding:14px 36px; font-size:18px; font-weight:600; border-radius:50px; text-decoration:none; transition:all 0.3s ease;">
      Shop Now
    </a>
  </div>
</div>

<!-- MOBILE RESPONSIVENESS -->
<style>
  @media screen and (max-width: 768px) {
    .collection-horizontal-banner {
      height:200px;
    }
    .collection-horizontal-banner h1 {
      font-size:20px !important;
    }
    .collection-horizontal-banner p {
      font-size:14px !important;
    }
    .collection-horizontal-banner a {
      padding:10px 24px !important;
      font-size:16px !important;
    }
  }

  /* Hover effect */
  .collection-horizontal-banner a:hover {
    background-color:#000000 !important;
    color:#ffffff !important;
  }
</style>