{# File: Components/hero.njk #}
{# SMURFMARKT HERO - CLEAN DARK THEME WITH ANIMATED GRADIENT #}

{% if properties.background_image == 'DEFAULT' %}
  {% set bgImageUrl = 'hero.jpg' | assetUrl %}
{% else %}
  {% set bgImageUrl = properties.background_image | imageUrl %}
{% endif %}
<section class="sm-hero alignment-{{ properties.alignment | default('center') }} height-{{ properties.height | default('medium') }} component" 
         style="{% if bgImageUrl %}background-image: url('{{ bgImageUrl }}');{% endif %}" 
         data-component-id="{{ componentId }}">
  
  {# Animated Gradient Background #}
  <div class="sm-hero__animated-gradient">
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="sm-hero__gradient-svg">
      <defs>
        <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
          <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
          <stop offset="0%" stop-color="#ff0" />
          <stop offset="100%" stop-color="#ff00" />
        </radialGradient>
        <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
          <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
          <stop offset="0%" stop-color="#0ff" />
          <stop offset="100%" stop-color="#0ff0" />
        </radialGradient>
        <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
          <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
          <stop offset="0%" stop-color="#f0f" />
          <stop offset="100%" stop-color="#f0f0" />
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
        <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
        <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
      </rect>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
        <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
        <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
      </rect>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
        <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
        <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
      </rect>
    </svg>
  </div>

  {# Background layers #}
  <div class="sm-hero__bg">
    <div class="sm-hero__gradient"></div>
    <div class="sm-hero__grid"></div>
    <div class="sm-hero__glow sm-hero__glow--1"></div>
    <div class="sm-hero__glow sm-hero__glow--2"></div>
  </div>
  
  <div class="sm-hero__overlay"></div>
{# Aurora & FarmUI Elements #}
  <div class="smurf-aurora-container">
    <div class="fui-blur-effect"></div>
    <div class="aurora-blob blob-1"></div>
    <div class="aurora-blob blob-2"></div>
  </div>
  <div class="container h-100 position-relative" style="z-index:4;">
    <div class="row h-100 align-items-center">
      <div class="{{ 'col-lg-7' if properties.side_image else 'col-lg-10 offset-lg-1' }}">
        <div class="sm-hero__content">
          
          {# Trust Badge #}
          <div class="sm-hero__badge animate-fade-in-up" data-animation-delay="0.05s">
            <span class="sm-hero__badge-dot"></span>
            <span class="sm-hero__badge-text">Trusted since 2021</span>
          </div>
          
          {# Title #}
          <h1 class="sm-hero__title animate-fade-in-up" data-animation-delay="0.1s">
            {{ properties.title | renderString }}
          </h1>
          
          {# Subtitle #}
          {% if properties.subtitle %}
          <p class="sm-hero__subtitle animate-fade-in-up" data-animation-delay="0.2s">
            {{ properties.subtitle | renderString }}
          </p>
          {% endif %}
          
          {# Search Bar #}
          {% if properties.show_searchbar %}
          <div class="sm-hero__search-wrap animate-fade-in-up" data-animation-delay="0.3s">
            <div class="sm-hero__search" data-bs-toggle="modal" data-bs-target="#searchModal" role="button">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" class="sm-hero__search-icon">
                <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
              </svg>
              <input type="text" class="form-control" placeholder="Search products & services..." readonly>
              <div class="sm-hero__search-shortcut">
                <kbd>⌘</kbd><kbd>K</kbd>
              </div>
            </div>
          </div>
          {% endif %}
          {# CTA Button #}
          {% if properties.cta and properties.cta_text %}
          <div class="sm-hero__cta-wrap animate-fade-in-up" data-animation-delay="0.4s">
            <a href="{{ properties.cta | shopUrl if properties.cta else '#' }}" class="sm-hero__cta">
              {% if properties.cta_text and (properties.cta_text | string | lower).includes('discord') %}
                <img src="https://assets.streamlinehq.com/image/private/w_300,h_300,ar_1/f_auto/v1/icons/logos/discord-827th92xaqo9x60z70d8.png/discord-3laxilfyqm52ssh24sv4oe.png?_a=DATAdtAAZAA0" alt="Discord" class="sm-hero__cta-prefix">
              {% endif %}
              <span>{{ properties.cta_text }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="sm-hero__cta-arrow" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
              </svg>
            </a>
          </div>
          {% endif %}

          {# Stats #}
          {% if properties.show_feedback_rating or properties.show_products_sold or properties.show_total_customers %}
          <div class="sm-hero__stats animate-fade-in-up" data-animation-delay="0.5s">
            {% if properties.show_feedback_rating %}
            <div class="sm-hero__stat">
              <div class="sm-hero__stat-value">
                <svg class="sm-hero__stat-star" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
                </svg>
                <span>{{ shop.average_rating }}</span>
              </div>
              <span class="sm-hero__stat-label">Rating</span>
            </div>
            {% endif %}
            {% if properties.show_products_sold %}
            <div class="sm-hero__stat">
              <div class="sm-hero__stat-value">
                <span>+</span><span class="counter" data-count="{{ shop.products_sold + 324800 }}">0</span>
              </div>
              <span class="sm-hero__stat-label">Products Sold</span>
            </div>
            {% endif %}
            {% if properties.show_total_customers %}
            <div class="sm-hero__stat">
              <div class="sm-hero__stat-value">
                <span>+</span><span class="counter" data-count="{{ shop.total_customers + 2400 }}">0</span>
              </div>
              <span class="sm-hero__stat-label">Customers</span>
            </div>
            {% endif %}
          </div>
          {% endif %}
        </div>
      </div>

      {# Side Image #}
      {% if properties.side_image %}
      <div class="col-lg-5 d-none d-lg-flex align-items-center justify-content-center">
        <div class="sm-hero__side-img-wrap animate-fade-in-right" data-animation-delay="0.3s">
          <img src="{{ properties.side_image | imageUrl }}" 
               alt="{{ properties.title | renderString | striptags }} hero image" 
               class="img-fluid sm-hero__side-img">
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  {# Search Modal #}
  {% if properties.show_searchbar %}
  <div class="modal fade sm-search-modal" id="searchModal" x-data="searchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <div class="form-group searchbar">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="sm-search-modal__icon">
              <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
            </svg>
            <input type="text" class="form-control" placeholder="Search products & services..." x-model="term" x-on:input="performSearch()" x-ref="searchInputModal">
          </div>
        </div>
        <div class="modal-body">
          <div class="products" x-ref="productsContainer">
            {% for main_item in sortedItems %} 
              {% set render_list = [] %}
              {% if main_item.type == 'group' %}
                {% set render_list = main_item.products %}
              {% else %}
                {% set render_list = [main_item] %}
              {% endif %}

              {% for product_search_item in render_list %}
                <a href="{{ ('/product/' + product_search_item.path) | shopUrl }}" class="product" 
                   data-title="{{ product_search_item.name | lower | escape }}"
                   data-description="{{ (product_search_item.description | striptags | lower | escape).replace('\n', ' ') }}"
                   data-variants="{% if product_search_item.variants %}{% for variant in product_search_item.variants %}{{ variant.name | lower }} {% endfor %}{% endif %}{% if product_search_item.options %}{% for option in product_search_item.options %}{{ option.name | lower }} {% for value in option.values %}{{ value | lower }} {% endfor %}{% endfor %}{% endif %}">
                  <div class="left">
                    <div class="image">
                      {% if product_search_item.image_urls|length > 0 %}
                      <img src="{{ product_search_item.image_urls[0] }}" class="img-fluid" alt="{{ product_search_item.name | escape }}"/>
                      {% elif product_search_item.image_url %}
                      <img src="{{ product_search_item.image_url }}" class="img-fluid" alt="{{ product_search_item.name | escape }}"/>
                      {% else %}
                      <div class="product-img-placeholder" style="color: {{ global.properties.theme_color }};">
                        <svg width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="m222.72 67.91l-88-48.18a13.9 13.9 0 0 0-13.44 0l-88 48.18A14 14 0 0 0 26 80.18v95.64a14 14 0 0 0 7.28 12.27l88 48.18a13.92 13.92 0 0 0 13.44 0l88-48.18a14 14 0 0 0 7.28-12.27V80.18a14 14 0 0 0-7.28-12.27ZM127 30.25a2 2 0 0 1 1.92 0L212.51 76l-33.94 18.57l-84.52-46.26ZM122 223l-83-45.43a2 2 0 0 1-1-1.75V86.66l84 46ZM43.49 76l38.07-20.85l84.51 46.26L128 122.24ZM218 175.82a2 2 0 0 1-1 1.75L134 223v-90.36l36-19.71V152a6 6 0 0 0 12 0v-45.63l36-19.71Z"/></svg>
                      </div>
                      {% endif %}
                      {% if product_search_item.product_badges.card|length > 0 %}
                        <div class="badges">
                        {% for productBadge in product_search_item.product_badges.card %}
                          <div style="background-color: {{ productBadge.color }}" data-text="{{ productBadge.label }}" data-color="{{ productBadge.color }}">
                            {% if productBadge.icon %}<i class="{{ productBadge.icon }}"></i>{% endif %}
                            {{ productBadge.label }}
                          </div>
                        {% endfor %}
                        </div>
                      {% endif %}
                    </div>
                    <div class="text">
                      <h3>{{ product_search_item.name }}</h3>
                      <p>{% if product_search_item.min_price != product_search_item.max_price %}<span x-text="appCurrency.format({{ product_search_item.min_price }}, '{{ product_search_item.currency }}')"></span> - <span x-text="appCurrency.format({{ product_search_item.max_price }}, '{{ product_search_item.currency }}')"></span>{% elif product_search_item.min_price %}<span x-text="appCurrency.format({{ product_search_item.min_price }}, '{{ product_search_item.currency }}')"></span>{% else %}-{% endif %}{% if product_search_item.min_price_slash and product_search_item.max_price_slash and product_search_item.min_price_slash != product_search_item.max_price_slash %} <s class="opacity-50"><span x-text="appCurrency.format({{ product_search_item.min_price_slash }}, '{{ product_search_item.currency }}')"></span> - <span x-text="appCurrency.format({{ product_search_item.max_price_slash }}, '{{ product_search_item.currency }}')"></span></s>{% elif product_search_item.min_price_slash %} <s class="opacity-50"><span x-text="appCurrency.format({{ product_search_item.min_price_slash }}, '{{ product_search_item.currency }}')"></span></s>{% endif %}</p>
                      <p class="stock text-primary">In Stock</p>
                    </div>
                  </div>
                  <div class="right"><p class="text-primary">In Stock</p></div>
                </a>
              {% endfor %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script> 
    document.addEventListener('alpine:init', () => {
      Alpine.data('searchModal', () => ({
        term: '',
        performSearch() {
          const searchTerm = this.term.toLowerCase().trim();
          const items = this.$refs.productsContainer.querySelectorAll('.product');
          
          items.forEach((item) => {
            const title = (item.dataset.title || '');
            const variants = (item.dataset.variants || '');
            const description = (item.dataset.description || '');

            let matches = false;

            if (searchTerm === "") {
              matches = true;
            } else {
              if (title.includes('other')) {
                matches = title.includes(searchTerm) || variants.includes(searchTerm) || description.includes(searchTerm);
              } else {
                matches = title.includes(searchTerm) || variants.includes(searchTerm);
              }
            }

            if (matches) {
              item.style.setProperty('display', 'flex', 'important');
            } else {
              item.style.setProperty('display', 'none', 'important');
            }
          });
        }
      }));
    });

    const searchModalEl = document.getElementById('searchModal');
    if (searchModalEl) { 
      searchModalEl.addEventListener('shown.bs.modal', function() {
        const searchInput = this.querySelector('.searchbar input[type="text"]'); 
        if (searchInput) searchInput.focus();
      });
    }

    // Counter animation
    document.addEventListener('DOMContentLoaded', function() {
      const counters = document.querySelectorAll('.counter');
      const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const counter = entry.target;
            const target = parseInt(counter.getAttribute('data-count'));
            const increment = target / 80;
            let current = 0;
            const timer = setInterval(() => {
              current += increment;
              counter.textContent = Math.floor(current).toLocaleString();
              if (current >= target) {
                counter.textContent = target.toLocaleString();
                clearInterval(timer);
              }
            }, 25);
            observer.unobserve(counter);
          }
        });
      }, { threshold: 0.5 });
      counters.forEach(counter => observer.observe(counter));
    });
  </script>
  {% endif %}
</section>

<style>
/* ============================================
   ANIMATED GRADIENT BACKGROUND - HERO
   ============================================ */

.sm-hero__animated-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3;
  mix-blend-mode: screen;
}

.sm-hero__gradient-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   SMURFMARKT HERO — CLEAN DARK THEME
   ============================================ */

.sm-hero {
  --h-bg: #0d1117;
  --h-surface: #161b22;
  --h-card: #1c2128;
  --h-accent: #00d4aa;
  --h-accent-light: #00f0c0;
  --h-accent-dim: rgba(0, 212, 170, 0.10);
  --h-accent-border: rgba(0, 212, 170, 0.25);
  --h-text: #e6edf3;
  --h-secondary: #8b949e;
  --h-muted: #6e7681;
  --h-border: #30363d;

  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--h-text);
  display: flex;
  overflow: hidden;
}

/* Height Variants */
.sm-hero.height-short  { min-height: 55vh; }
.sm-hero.height-small  { min-height: 65vh; }
.sm-hero.height-medium { min-height: 80vh; }
.sm-hero.height-large  { min-height: 90vh; }
.sm-hero.height-full   { min-height: 100vh; }

/* ===== Background Layers ===== */
.sm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.sm-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d1117 0%, #111827 40%, #0d1117 100%);
  z-index: 1;
}

.sm-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 170, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 170, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 2;
  mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);
}

.sm-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 3;
}

.sm-hero__glow--1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 212, 170, 0.08);
  top: -150px;
  left: -100px;
  animation: heroGlow 10s ease-in-out infinite;
}

.sm-hero__glow--2 {
  width: 400px;
  height: 400px;
  background: rgba(88, 101, 242, 0.06);
  bottom: -100px;
  right: -50px;
  animation: heroGlow 10s ease-in-out infinite 5s;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.sm-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, 0.3) 100%);
  z-index: 3;
}

/* ===== Alignment ===== */
.sm-hero.alignment-left .sm-hero__content   { text-align: left; }
.sm-hero.alignment-center .sm-hero__content { text-align: center; }
.sm-hero.alignment-right .sm-hero__content  { text-align: right; }

.sm-hero__content {
  padding: 3rem 0;
  position: relative;
}

/* ===== Trust Badge ===== */
.sm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--h-accent-dim);
  border: 1px solid var(--h-accent-border);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.75rem;
}

.sm-hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--h-accent);
  box-shadow: 0 0 8px var(--h-accent);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--h-accent); }
  50% { opacity: 0.5; box-shadow: 0 0 4px var(--h-accent); }
}

.sm-hero__badge-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--h-accent);
  letter-spacing: 0.02em;
}

/* ===== Title ===== */
.sm-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--h-text);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

/* ===== Subtitle ===== */
.sm-hero__subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--h-secondary);
  max-width: 550px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.sm-hero.alignment-center .sm-hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ===== Search Bar ===== */
.sm-hero__search-wrap {
  margin-bottom: 1.5rem;
}

.sm-hero__search {
  background: var(--h-surface);
  border: 1px solid var(--h-border);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  max-width: 480px;
  transition: all 0.2s ease;
  gap: 0.6rem;
}

.sm-hero.alignment-center .sm-hero__search {
  margin-left: auto;
  margin-right: auto;
}

.sm-hero.alignment-right .sm-hero__search {
  margin-left: auto;
}

.sm-hero__search:hover {
  border-color: var(--h-accent-border);
  background: var(--h-card);
}

.sm-hero__search-icon {
  color: var(--h-muted);
  flex-shrink: 0;
}

.sm-hero__search .form-control {
  border: none;
  box-shadow: none !important;
  padding: 0.25rem 0;
  background: transparent;
  color: var(--h-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.sm-hero__search .form-control::placeholder {
  color: var(--h-muted);
}

.sm-hero__search-shortcut {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
}

.sm-hero__search-shortcut kbd {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--h-muted);
  font-family: inherit;
  line-height: 1.2;
}

/* ===== CTA Button ===== */
.sm-hero__cta-wrap {
  margin-bottom: 1rem;
}

.sm-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #5865F2;
  color: #ffffff !important;
  padding: 0.85rem 1.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.sm-hero__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.sm-hero__cta:hover::after {
  left: 150%;
}

.sm-hero__cta:hover {
  background: #6872f2;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
  color: #ffffff !important;
}

.sm-hero__cta-prefix {
  height: 1.3em;
  width: auto;
}

.sm-hero__cta-arrow {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.2s ease;
}

.sm-hero__cta:hover .sm-hero__cta-arrow {
  transform: translateX(3px);
}

/* ===== Stats ===== */
.sm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.sm-hero.alignment-center .sm-hero__stats { justify-content: center; }
.sm-hero.alignment-right .sm-hero__stats  { justify-content: flex-end; }

.sm-hero__stat {
  text-align: center;
  padding: 0.75rem 1.25rem;
  background: var(--h-surface);
  border: 1px solid var(--h-border);
  border-radius: 10px;
  min-width: 110px;
  transition: all 0.2s ease;
}

.sm-hero__stat:hover {
  border-color: var(--h-accent-border);
  background: var(--h-card);
  transform: translateY(-2px);
}

.sm-hero__stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--h-text);
  line-height: 1.2;
}

.sm-hero__stat-star {
  width: 1.1em;
  height: 1.1em;
  fill: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
}

.sm-hero__stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--h-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
  font-weight: 600;
}

/* ===== Side Image ===== */
.sm-hero__side-img-wrap {
  position: relative;
}

.sm-hero__side-img {
  border-radius: 16px;
  max-height: 75vh;
  border: none;
  transition: all 0.35s ease;
}

.sm-hero__side-img-wrap:hover .sm-hero__side-img {
  transform: scale(1.03);
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
}

/* ===== Search Modal Override ===== */
.sm-search-modal .modal-content {
  background: var(--h-surface);
  border: 1px solid var(--h-border);
  border-radius: 14px;
}

.sm-search-modal .modal-header {
  border-bottom-color: var(--h-border);
  padding: 1rem;
}

.sm-search-modal .searchbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.sm-search-modal__icon {
  color: var(--h-muted);
  flex-shrink: 0;
}

.sm-search-modal .searchbar .form-control {
  background: transparent;
  border: none;
  color: var(--h-text);
  font-size: 0.95rem;
  box-shadow: none !important;
}

.sm-search-modal .searchbar .form-control::placeholder {
  color: var(--h-muted);
}

.sm-search-modal .modal-body {
  padding: 0.5rem;
  max-height: 50vh;
}

.sm-search-modal .product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--h-text);
  transition: all 0.15s ease;
}

.sm-search-modal .product:hover {
  background: var(--h-card);
}

.sm-search-modal .product .left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sm-search-modal .product .image {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--h-card);
  border: 1px solid var(--h-border);
}

.sm-search-modal .product .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sm-search-modal .product .text h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--h-text);
  margin: 0;
}

.sm-search-modal .product .text p {
  font-size: 0.75rem;
  color: var(--h-secondary);
  margin: 0;
}

.sm-search-modal .product .right p {
  font-size: 0.7rem;
  color: var(--h-accent);
  font-weight: 600;
  margin: 0;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s ease-out forwards;
}

.animate-fade-in-right {
  opacity: 0;
  animation: fadeInRight 0.8s ease-out forwards;
}

[data-animation-delay="0.05s"] { animation-delay: 0.05s; }
[data-animation-delay="0.1s"]  { animation-delay: 0.1s; }
[data-animation-delay="0.2s"]  { animation-delay: 0.2s; }
[data-animation-delay="0.3s"]  { animation-delay: 0.3s; }
[data-animation-delay="0.4s"]  { animation-delay: 0.4s; }
[data-animation-delay="0.5s"]  { animation-delay: 0.5s; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .sm-hero__stats {
    max-width: 360px;
  }
}

@media (max-width: 767px) {
  .sm-hero__content {
    padding: 2rem 0;
  }

  .sm-hero__stats {
    flex-direction: row;
    gap: 0.5rem;
  }

  .sm-hero__stat {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.5rem;
  }

  .sm-hero__stat-value {
    font-size: 1.05rem;
  }

  .sm-hero__search {
    max-width: 100%;
  }

  .sm-hero__search-shortcut {
    display: none;
  }

  .sm-hero__cta {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .sm-hero__title {
    font-size: 1.5rem;
  }

  .sm-hero__subtitle {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
</style>