/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 163:0 Unexpected "{"
Line 163:1 Expected identifier but found "%"
Line 165:0 Unexpected "<"
Line 167:9 Unexpected "{"
Line 167:18 Expected ":"
Line 167:38 Unexpected "<"
Line 172:5 Expected identifier but found "%"
Line 173:6 Unexpected "{"
... and 29 more hidden warnings

**/
{% stylesheet %}
/* === Deals of the Day Carousel Styles === */

.deals-carousel-wrapper {
  margin-top: 40px;
  padding: 0 16px;
}

.deals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.deals-header h2 {
  font-size: 20px;
  font-family: 'Gabarito', sans-serif;
  color: #1e2d27;
}

.deals-timer {
  font-size: 14px;
  color: #e53935;
  font-weight: 600;
}

.view-all-deals {
  font-size: 14px;
  color: #008060;
  text-decoration: none;
}

.deals-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.deal-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 8px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 340px;
}

.deal-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 6px;
}

.deal-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  line-height: 1.4;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.deal-title:hover {
  color: #008060;
  text-decoration: underline;
}

.deal-price {
  font-size: 13px;
  color: #008060;
  margin: 4px 0 12px;
}

.compare-at {
  text-decoration: line-through;
  color: #999;
  margin-right: 6px;
}

.deal-cart-btn {
  background: #008060;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: auto;
  align-self: center;
}

.deal-cart-btn:hover {
  background: #00664d;
}

/* Rounded Discount Badge */
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 40px;
  height: 40px;
}

/* Responsive */
@media (max-width: 768px) {
  .deal-card {
    width: 140px;
    min-height: 320px;
  }

  .deals-header h2 {
    font-size: 18px;
  }
}
{% endstylesheet %}

<div class="deals-carousel-wrapper">
  <div class="deals-header">
    <h2>{{ section.settings.heading }}</h2>
    <span class="deals-timer">20:00:00 Left</span>
    <a class="view-all-deals" href="/collections/all">View All Deals</a>
  </div>
  <div class="deals-scroll-container">
    {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product] %}
      {% if product %}
        <div class="deal-card">
          <div class="discount-badge">
            {{ block.settings.discount_percent }}% OFF
          </div>
          <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: '360x' }}" alt="{{ product.title }}">
          </a>
          <a class="deal-title" href="{{ product.url }}">{{ product.title }}</a>
          <div class="deal-price">
            {% if product.compare_at_price > product.price %}
              <span class="compare-at">Rs. {{ product.compare_at_price | money_without_trailing_zeros }}</span>
            {% endif %}
            Rs. {{ product.price | money_without_trailing_zeros }}
          </div>
          <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}">
            <button type="submit" class="deal-cart-btn">Add to Cart</button>
          </form>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "Deals Carousel",
  "max_blocks": 10,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Deals of the Day"
    }
  ],
  "blocks": [
    {
      "type": "deal_item",
      "name": "Deal Item",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Choose product"
        },
        {
          "type": "text",
          "id": "discount_percent",
          "label": "Discount percent (for display only)",
          "default": "10"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Deals Carousel",
      "category": "Custom"
    }
  ]
}
{% endschema %}