/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 504:2 Unexpected "<"

**/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monthly Specials | NurturePet Pet Supply</title>
  <style>
    :root {
      --primary-dark: #1e293b;
      --text-gray: #64748b;
      --modern-gold: #d4a373;
      --light-bg: #f8fafc;
      --white: #ffffff;
      --border-color: #e2e8f0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      color: var(--primary-dark);
      background-color: var(--white);
      line-height: 1.5;
    }

    /* Top Utility Nav */
    .utility-nav {
      background-color: var(--light-bg);
      font-size: 12px;
      padding: 8px 5%;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-gray);
      font-weight: 500;
    }

    /* Header */
    .header-container {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 30px;
      padding: 16px 5%;
      border-bottom: 1px solid var(--border-color);
    }

    .brand-logo {
      font-size: 22px;
      font-weight: 800;
      color: var(--primary-dark);
      letter-spacing: -0.02em;
    }

    .search-bar-container {
      display: flex;
      max-width: 500px;
      width: 100%;
    }

    .search-bar-container input {
      flex: 1;
      padding: 10px 16px;
      border: 1px solid var(--border-color);
      border-right: none;
      border-radius: 8px 0 0 8px;
      font-size: 14px;
    }

    .search-bar-container button {
      padding: 10px 20px;
      background: var(--primary-dark);
      color: white;
      border: 1px solid var(--primary-dark);
      border-radius: 0 8px 8px 0;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
    }

    .user-links {
      display: flex;
      gap: 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--primary-dark);
    }

    /* Category Nav */
    .category-nav {
      display: flex;
      gap: 8px;
      padding: 12px 5%;
      border-bottom: 1px solid var(--border-color);
      overflow-x: auto;
      font-size: 14px;
      font-weight: 700;
    }

    .category-nav a {
      color: var(--primary-dark);
      text-decoration: none;
      padding: 6px 14px;
      border-radius: 20px;
      white-space: nowrap;
    }

    .category-nav a.active {
      background-color: #fef2f2;
      color: #b91c1c;
    }

    /* ========================================================
       MONTHLY SPECIALS SECTION (Exact CSS from main-offers.liquid)
       ======================================================== */
    .offers-container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 56px 5% 80px;
    }

    .offers-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 52px;
    }

    .offers-header h1 {
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.025em;
      line-height: 1.2;
      margin: 0 0 16px;
    }

    .offers-header p {
      font-size: 16px;
      line-height: 1.65;
      color: #64748b;
      margin: 0 auto;
      font-weight: 400;
    }

    .offers-card-wrapper {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .offers-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .offers-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.09);
      border-color: #cbd5e1;
    }

    .offers-card-grid {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    @media (min-width: 860px) {
      .offers-card-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      }
    }

    /* Left Side: Graphic / Media Container */
    .offers-card-media {
      background-color: #f8fafc;
      position: relative;
      min-height: 340px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 32px;
    }

    .offers-card-media-banner {
      width: 100%;
      height: 100%;
      min-height: 320px;
      background: linear-gradient(135deg, #fefce8 0%, #fef3c7 50%, #fefce8 100%);
      border: 1px solid #fde68a;
      border-radius: 16px;
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08);
      position: relative;
    }

    .banner-top-badge {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: #92400e;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .banner-main-title {
      font-size: clamp(26px, 3.2vw, 36px);
      font-weight: 900;
      color: #1e293b;
      line-height: 1.15;
      margin-bottom: 6px;
    }

    .banner-free-callout {
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 900;
      color: #15803d;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .banner-subtext {
      font-size: 14px;
      font-weight: 600;
      color: #78350f;
      margin-bottom: 20px;
    }

    .banner-bags-graphic {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .banner-bag-pill {
      background: #1e293b;
      color: white;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 6px;
    }

    .banner-footer-note {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Right Side: Offer Content */
    .offers-card-content {
      padding: clamp(32px, 4.5vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }

    .offers-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background-color: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .offers-heading {
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 800;
      color: #1e293b;
      line-height: 1.25;
      margin: 0 0 16px;
      letter-spacing: -0.015em;
    }

    .offers-body {
      font-size: 15px;
      line-height: 1.65;
      color: #475569;
      margin: 0 0 20px;
    }

    .offers-disclaimer {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background-color: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 28px;
    }

    .offers-disclaimer svg {
      color: #10b981;
      flex-shrink: 0;
    }

    .offers-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background-color: #1e293b;
      color: #ffffff;
      padding: 14px 32px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 14px rgba(30, 41, 59, 0.16);
      letter-spacing: 0.01em;
    }

    .offers-cta-button:hover {
      background-color: #d4a373;
      border-color: #d4a373;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(212, 163, 115, 0.38);
    }

    .offers-cta-arrow {
      transition: transform 0.2s ease;
    }

    .offers-cta-button:hover .offers-cta-arrow {
      transform: translateX(4px);
    }

    /* Mobile-Only Overrides */
    @media screen and (max-width: 768px) {
      .utility-nav {
        font-size: 11px;
        padding: 6px 4%;
        flex-direction: column;
        gap: 4px;
        text-align: center;
      }

      .header-container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 14px 4%;
      }

      .search-bar-container {
        max-width: 100%;
      }

      .offers-container {
        padding-top: 28px !important;
        padding-bottom: 44px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      .offers-header {
        margin-bottom: 28px !important;
      }

      .offers-header h1 {
        font-size: 26px !important;
        margin-bottom: 10px !important;
      }

      .offers-header p {
        font-size: 14px !important;
        line-height: 1.55 !important;
      }

      .offers-card-wrapper {
        gap: 24px !important;
      }

      .offers-card {
        border-radius: 18px !important;
      }

      .offers-card-grid {
        display: flex !important;
        flex-direction: column !important;
      }

      .offers-card-media {
        min-height: auto !important;
        padding: 16px !important;
      }

      .offers-card-media-banner {
        min-height: auto !important;
        padding: 24px 16px !important;
      }

      .banner-main-title {
        font-size: 22px !important;
      }

      .banner-free-callout {
        font-size: 28px !important;
      }

      .banner-bags-graphic {
        flex-wrap: wrap !important;
        gap: 6px !important;
      }

      .banner-bag-pill {
        font-size: 10px !important;
        padding: 4px 8px !important;
      }

      .offers-card-content {
        padding: 22px 18px !important;
        align-items: stretch !important;
        text-align: left !important;
      }

      .offers-badge {
        font-size: 10px !important;
        padding: 4px 10px !important;
        margin-bottom: 12px !important;
        align-self: flex-start !important;
      }

      .offers-heading {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.01em !important;
      }

      .offers-body {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
      }

      .offers-disclaimer {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        margin-bottom: 20px !important;
        gap: 6px !important;
      }

      .offers-disclaimer svg {
        width: 15px !important;
        height: 15px !important;
      }

      .offers-cta-button {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
      }
    }
  </style>
</head>
<body>

  <!-- Top Support Bar -->
  <div class="utility-nav">
    <span>📞 Expert Support: (609) 377-5455</span>
    <span>Free Delivery on orders over $49</span>
  </div>

  <!-- Header -->
  <header class="header-container">
    <div class="brand-logo">NurturePet🐾</div>
    <div class="search-bar-container">
      <input type="text" placeholder="Search brands, products, or advice...">
      <button>Search</button>
    </div>
    <div class="user-links">
      <span>Log In</span>
      <span>Cart 🛒</span>
    </div>
  </header>

  <!-- Categories -->
  <nav class="category-nav">
    <a href="#">Dog Supplies</a>
    <a href="#">Cat Supplies</a>
    <a href="#">Fish & Aquatics</a>
    <a href="#">Shop By Brand</a>
    <a href="#" class="active">Monthly Specials</a>
    <a href="#">Clearance</a>
    <a href="#">Pet Advice Hub</a>
  </nav>

  <!-- Main Monthly Specials Content -->
  <main class="offers-container">
    
    <!-- 1. Refined Typography & Clean Sentence Case Header -->
    <header class="offers-header">
      <h1>Monthly Specials</h1>
      <p>
        At NurturePet, your pet’s health and happiness always come first. Every month, we partner with our most trusted brands to bring you exclusive savings, limited-time promotions, and special gifts.
      </p>
    </header>

    <!-- 2. Balanced 2-Column Promo Offer Cards -->
    <div class="offers-card-wrapper">
      
      <!-- Promo 1: American Natural Premium BOGO -->
      <article class="offers-card">
        <div class="offers-card-grid">
          
          <!-- Graphic Column -->
          <div class="offers-card-media">
            <div class="offers-card-media-banner">
              <div class="banner-top-badge">Special Promotion</div>
              <div class="banner-main-title">Buy One 4 lb Bag</div>
              <div class="banner-free-callout">GET ONE FREE</div>
              <div class="banner-subtext">Mix & match between all five chicken-free recipes</div>
              <div class="banner-bags-graphic">
                <span class="banner-bag-pill">Pork Recipe</span>
                <span class="banner-bag-pill">Turkey Recipe</span>
                <span class="banner-bag-pill">Ocean Fish</span>
                <span class="banner-bag-pill">Duck & Pork</span>
              </div>
              <div class="banner-footer-note">American Natural Premium &bull; Natural Ingredients</div>
            </div>
          </div>

          <!-- Content Column -->
          <div class="offers-card-content">
            <div class="offers-badge">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                <line x1="7" y1="7" x2="7.01" y2="7"></line>
              </svg>
              <span>Buy One, Get One</span>
            </div>

            <h2 class="offers-heading">Buy 1 Get 1 Free: Mix &amp; Match American Natural Premium 4 lb Bags</h2>

            <div class="offers-body">
              <p>
                Whether you're introducing your dog to American Natural Premium for the first time or wanting to rotate between their chicken-free recipes, take advantage of this month's special offer. Add any two 4 lb bags to your cart and the second bag is automatically free.
              </p>
            </div>

            <div class="offers-disclaimer">
              <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
              <span>Discount automatically applied at checkout</span>
            </div>

            <a href="#" class="offers-cta-button">
              <span>Take Me There</span>
              <svg class="offers-cta-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
              </svg>
            </a>
          </div>

        </div>
      </article>

    </div>

  </main>

</body>
</html>
