/* 1. THE OUTERMOST GRID BOXES: ONLY THESE PULSE */
.card, .product-card, [data-card], .grid-item {
  background-color: #000 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important; /* The ONLY pulsing border */
  border-radius: 12px !important;
  animation: outer-frame-white-pulse 3.5s infinite ease-in-out !important;
  transition: all 0.3s ease;
  overflow: visible !important;
}

/* 2. THE PULSE ANIMATION */
@keyframes outer-frame-white-pulse {
  0%, 100% { 
    border-color: rgba(255, 255, 255, 0.1); 
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05); 
  }
  50% { 
    border-color: rgba(255, 255, 255, 0.6); 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); 
  }
}

/* 3. THE "STFU" RULE: FORCIBLY REMOVES EVERY INNER BORDER */
.card *, 
.product-card *, 
div[class*="card"] div, 
div[class*="card"] span, 
div[class*="card"] a,
.badge, .tag, .price, .product-title {
  border: 0px solid transparent !important; /* Forces 0 width and transparent color */
  border-style: none !important;           /* Kills the border style */
  outline: none !important;                /* Kills any focus outlines */
  box-shadow: none !important;             /* Kills inner glows */
  animation: none !important;              /* Kills inner pulsing */
  text-shadow: none !important;            /* Kills text blur */
  background-color: transparent !important; /* Optional: cleans up grey backgrounds */
}

/* 4. TEXT: Sharp, clean, and solid white */
h1, h2, h3, p, span, a {
  color: #ffffff !important;
  opacity: 1 !important;
  border: none !important;
}

/* Apply Pulse to ALL text globally */
h1, h2, h3, h4, h5, h6, p, span, a, li, label {
  color: #ffffff !important;
  animation: pulse-white-glow 2.5s infinite ease-in-out;
}

/* Ensure the animation exists (keep your original keyframes) */
@keyframes pulse-white-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,0.4); opacity: 0.8; }
  50% { text-shadow: 0 0 16px rgba(255,255,255,1), 0 0 22px rgba(255,255,255,0.3); opacity: 1; }
}
  /* Footer Bottom Section - THICKER TRACING LINE */
  .footer-bottom {
    position: relative;
    margin-top: 20px;
    padding: 25px 0 20px 0;
    text-align: center;
    border-top: none !important; /* Kills the original thin line */
  }

  /* The Thicker Tracing Beam */
  .footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px; /* INCREASED from 1px to 2px */
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.1) 30%, 
      rgba(255, 255, 255, 1) 50%, 
      rgba(255, 255, 255, 0.1) 70%, 
      transparent 100%
    ) no-repeat;
    background-size: 40% 100%; /* WIDER beam for better visibility */
    animation: footerTrace 5s ease-in-out infinite; /* Slightly faster at 5s */
    z-index: 1;
  }

  /* Static background line for depth */
  .footer-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
  }

  /* Smooth Scanning Animation */
  @keyframes footerTrace {
    0% { background-position: -150% 0; }
    50% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
  }

  <div class="container component" data-component-id="{{ componentId }}">
  <section class="x-status" id="vision-status">
    <span class="x-scan"></span>
    <span class="x-grid"></span>

    <div class="x-status-head">
      <div class="x-head-left">
        <h1 class="x-title"><span class="x-em">Live</span> Product Status</h1>
        <p class="x-sub">Realtime overview of all products. Click a legend tag to filter.</p>
      </div>

      <div class="x-head-right">
        <div class="x-legend" id="legend">
          <button type="button" class="x-tag is-on" data-filter="undetected">
            <span class="dot" style="--c:#10d98d"></span> Undetected
          </button>
          <button type="button" class="x-tag is-on" data-filter="updating">
            <span class="dot" style="--c:#ffb020"></span> Updating
          </button>
          <button type="button" class="x-tag is-on" data-filter="detected">
            <span class="dot" style="--c:#ff4d4d"></span> Detected
          </button>
          <button type="button" class="x-tag is-on" data-filter="discontinued">
            <span class="dot" style="--c:#ff8a00"></span> Discontinued
          </button>
          <button type="button" class="x-tag is-on" data-filter="unknown">
            <span class="dot" style="--c:#9aa4b2"></span> Unknown
          </button>
        </div>

        <div class="x-tools">
          <div class="x-input">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <path d="M21 21l-4.3-4.3m1.3-5A7 7 0 1 1 5 5a7 7 0 0 1 13 6.7Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
            <input id="statusSearch" type="search" placeholder="Search product…" autocomplete="off">
          </div>
          <button class="x-refresh" onclick="location.reload()">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path d="M4 4v6h6M20 20v-6h-6M20 8A8 8 0 0 0 7.7 6.7M4 16A8 8 0 0 0 16.3 17.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
            Refresh
          </button>
        </div>
      </div>
    </div>

    <div class="x-groups" id="statusGroups">
      {% for item in sortedItems %}
        {% if item.type == 'group' %}
          <section class="x-group" data-group>
            <header class="x-group-head"><h2>{{ item.name }}</h2></header>
            <div class="x-cards">
              {% for p in item.products %}
                {% set raw = (p.status_text | default('') | lower | trim) %}
                {% set status_slug = raw in ['undetected','updating','detected','discontinued'] and raw or 'unknown' %}
                {% set stcolor = p.status_color %}
                {% if not stcolor %}
                  {% if status_slug == 'undetected' %}{% set stcolor = '#10d98d' %}
                  {% elseif status_slug == 'updating' %}{% set stcolor = '#ffb020' %}
                  {% elseif status_slug == 'detected' %}{% set stcolor = '#ff4d4d' %}
                  {% elseif status_slug == 'discontinued' %}{% set stcolor = '#ff8a00' %}
                  {% else %}{% set stcolor = '#9aa4b2' %}{% endif %}
                {% endif %}

                {% set rawSlug = p.slug or p.handle or p.permalink or p.seo_url %}
                {% if not rawSlug %}
                  {% set rawSlug = ((p.path or p.name | default('')) | lower
                    | replace(' ', '-') | replace('/', '-') | replace('.', '')
                    | replace('&','and')) %}
                {% endif %}
                {% set href = ('/product/' ~ rawSlug) | shopUrl %}

                <a class="x-card"
                   href="{{ href }}"
                   title="{{ p.name }}"
                   data-status="{{ status_slug }}"
                   style="--st: {{ stcolor }};">
                  <div class="x-card-main">
                    <div class="x-name">
                      <span class="x-label">{{ p.name }}</span>
                      {% if p.subtitle %}<span class="x-subtle">{{ p.subtitle }}</span>{% endif %}
                    </div>
                    <div class="x-pill">
                      <span class="dot"></span>
                      <span class="txt">{{ p.status_text | default('Unknown') }}</span>
                    </div>
                  </div>
                  <div class="x-meta">
                    {% if p.variants and (p.variants | length) > 0 and p.variants[0] %}
                      <span class="x-price">{{ formatPrice(p.variants[0].price, p.currency) }}</span>
                    {% endif %}
                  </div>
                  <span class="x-glow" aria-hidden="true"></span>
                  <span class="x-border" aria-hidden="true"></span>
                </a>
              {% endfor %}
            </div>
          </section>

        {% elseif not item.group_id %}
          {% set raw = (item.status_text | default('') | lower | trim) %}
          {% set status_slug = raw in ['undetected','updating','detected','discontinued'] and raw or 'unknown' %}
          {% set stcolor = item.status_color %}
          {% if not stcolor %}
            {% if status_slug == 'undetected' %}{% set stcolor = '#10d98d' %}
            {% elseif status_slug == 'updating' %}{% set stcolor = '#ffb020' %}
            {% elseif status_slug == 'detected' %}{% set stcolor = '#ff4d4d' %}
            {% elseif status_slug == 'discontinued' %}{% set stcolor = '#ff8a00' %}
            {% else %}{% set stcolor = '#9aa4b2' %}{% endif %}
          {% endif %}

          {% set rawSlug = item.slug or item.handle or item.permalink or item.seo_url %}
          {% if not rawSlug %}
            {% set rawSlug = ((item.path or item.name | default('')) | lower
              | replace(' ', '-') | replace('/', '-') | replace('.', '')
              | replace('&','and')) %}
          {% endif %}
          {% set href = ('/product/' ~ rawSlug) | shopUrl %}

          <section class="x-group" data-group>
            <div class="x-cards">
              <a class="x-card"
                 href="{{ href }}"
                 title="{{ item.name }}"
                 data-status="{{ status_slug }}"
                 style="--st: {{ stcolor }};">
                <div class="x-card-main">
                  <div class="x-name"><span class="x-label">{{ item.name }}</span></div>
                  <div class="x-pill"><span class="dot"></span><span class="txt">{{ item.status_text | default('Unknown') }}</span></div>
                </div>
                <div class="x-meta">
                  {% if item.variants and (item.variants | length) > 0 and item.variants[0] %}
                    <span class="x-price">{{ formatPrice(item.variants[0].price, item.currency) }}</span>
                  {% endif %}
                </div>
                <span class="x-glow" aria-hidden="true"></span>
                <span class="x-border" aria-hidden="true"></span>
              </a>
            </div>
          </section>
        {% endif %}
      {% endfor %}
    </div>

    <script>
      (function () {
        const q = document.getElementById('statusSearch');
        const groups = [...document.querySelectorAll('#statusGroups [data-group]')];
        const legend = document.getElementById('legend');

        let activeFilters = new Set(
          [...legend.querySelectorAll('.x-tag.is-on')].map(b => b.dataset.filter)
        );

        function applyFilters() {
          const query = (q && q.value || '').trim().toLowerCase();
          groups.forEach(g => {
            const cards = [...g.querySelectorAll('.x-card')];
            let visible = 0;
            cards.forEach(c => {
              const name = (c.querySelector('.x-label')?.textContent || '').toLowerCase();
              const status = (c.dataset.status || '').replace(/-/g, '');
              const okText = !query || name.includes(query);
              const okStatus = activeFilters.size === 0 || activeFilters.has(status);
              const show = okText && okStatus;
              c.style.display = show ? '' : 'none';
              if (show) visible++;
            });
            g.style.display = visible ? '' : 'none';
          });
        }

        q && q.addEventListener('input', applyFilters);

        legend && legend.addEventListener('click', (e) => {
          const btn = e.target.closest('.x-tag'); if (!btn) return;
          btn.classList.toggle('is-on');
          const key = btn.dataset.filter;
          if (btn.classList.contains('is-on')) activeFilters.add(key);
          else activeFilters.delete(key);
          applyFilters();
        });

        applyFilters();
      })();
    </script>
  </section>
</div>