/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 32:140 Unexpected "("
Line 33:1 Expected identifier but found "%"
Line 34:0 Unexpected "{"
Line 34:1 Expected identifier but found "%"
Line 36:0 Unexpected "{"
Line 36:1 Expected identifier but found "%"
Line 37:23 Unexpected "{"
Line 37:34 Expected ":"
... and 120 more hidden warnings

**/
{% doc %}
  @prompt
    Create a complete global CSS design system file for HXCKDEV, a premium FiveM/GTA marketplace storefront.
    
    Design language: Premium, dark, modern, technical, gaming/developer aesthetic. Clean and minimal. No excessive neon.
    
    CSS custom properties to define:
    -- hxck-bg: #0a0a0a
    -- hxck-surface: #111111
    -- hxck-surface-2: #1a1a1a
    -- hxck-surface-3: #222222
    -- hxck-border: #2a2a2a
    -- hxck-accent: #00c8ff
    -- hxck-text: #f0f0f0
    -- hxck-text-secondary: #888888
    
    Include full styles for: premium product cards (.hxck-card) with image zoom on hover, sale/new badges, add-to-cart button; product grid (.hxck-grid) 4-col desktop/2-col mobile; sticky dark header (.hxck-header) with blur; 3-column footer (.hxck-footer); collection header with category nav pills; Discord CTA section; breadcrumbs; filter bar with chips; empty state; accessible focus states; custom scrollbar; full mobile responsive overrides.
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .hxck-design-system-{{ ai_gen_id }} {
    --hxck-bg: #0a0a0a;
    --hxck-surface: #111111;
    --hxck-surface-2: #1a1a1a;
    --hxck-surface-3: #222222;
    --hxck-border: #2a2a2a;
    --hxck-accent: #00c8ff;
    --hxck-text: #f0f0f0;
    --hxck-text-secondary: #888888;
    --hxck-success: #61d095;
    --hxck-danger: #ff766d;
    --hxck-radius: 4px;
    --hxck-shadow: 0 14px 40px rgba(0, 0, 0, .28);
    color: var(--hxck-text);
    display: block;
    width: {{ block.settings.desktop_width_percent }}%;
    max-width: 100%;
    font-family: inherit;
    color-scheme: dark;
  }

  .hxck-design-system-{{ ai_gen_id }},
  .hxck-design-system-{{ ai_gen_id }} * { box-sizing: border-box; }

  .hxck-design-system-{{ ai_gen_id }} ::selection { background: var(--hxck-accent); color: var(--hxck-bg); }
  .hxck-design-system-{{ ai_gen_id }} ::-webkit-scrollbar { width: 8px; height: 8px; }
  .hxck-design-system-{{ ai_gen_id }} ::-webkit-scrollbar-track { background: var(--hxck-bg); }
  .hxck-design-system-{{ ai_gen_id }} ::-webkit-scrollbar-thumb { background: var(--hxck-surface-3); border: 2px solid var(--hxck-bg); border-radius: 99px; }
  .hxck-design-system-{{ ai_gen_id }} ::-webkit-scrollbar-thumb:hover { background: var(--hxck-accent); }

  .hxck-design-system-{{ ai_gen_id }} .hxck-header {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 68px; padding: 14px clamp(18px, 4vw, 56px); background: rgba(10,10,10,.86); border-bottom: 1px solid var(--hxck-border);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .hxck-design-system-{{ ai_gen_id }} .hxck-header a { color: var(--hxck-text); text-decoration: none; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-header a:hover { color: var(--hxck-accent); }

  .hxck-design-system-{{ ai_gen_id }} .hxck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card { position: relative; overflow: hidden; background: var(--hxck-surface); border: 1px solid var(--hxck-border); border-radius: var(--hxck-radius); box-shadow: 0 4px 18px rgba(0,0,0,.12); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card:hover { border-color: rgba(0,200,255,.55); transform: translateY(-3px); box-shadow: var(--hxck-shadow); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--hxck-surface-2); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card:hover .hxck-card__media img { transform: scale(1.06); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__content { display: grid; gap: 10px; padding: 18px; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__title { margin: 0; color: var(--hxck-text); font-size: 1rem; font-weight: 650; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__price { color: var(--hxck-text-secondary); font-size: .9rem; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__actions { display: flex; gap: 8px; align-items: center; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__button, .hxck-design-system-{{ ai_gen_id }} .hxck-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hxck-accent); border-radius: var(--hxck-radius); background: var(--hxck-accent); color: #00141a; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-card__button:hover, .hxck-design-system-{{ ai_gen_id }} .hxck-button:hover { background: transparent; color: var(--hxck-accent); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-badge { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; padding: 6px 9px; border: 1px solid currentColor; border-radius: 3px; background: rgba(10,10,10,.9); color: var(--hxck-accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-badge--sale { color: var(--hxck-danger); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-badge--new { color: var(--hxck-success); }

  .hxck-design-system-{{ ai_gen_id }} .hxck-collection-header { display: grid; gap: 22px; padding: clamp(34px, 7vw, 80px) 0 28px; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-category-nav, .hxck-design-system-{{ ai_gen_id }} .hxck-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-pill, .hxck-design-system-{{ ai_gen_id }} .hxck-filter-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--hxck-border); border-radius: 999px; background: var(--hxck-surface); color: var(--hxck-text-secondary); text-decoration: none; font-size: .84rem; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-pill:hover, .hxck-design-system-{{ ai_gen_id }} .hxck-pill.is-active, .hxck-design-system-{{ ai_gen_id }} .hxck-filter-chip.is-active { border-color: var(--hxck-accent); color: var(--hxck-accent); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--hxck-text-secondary); font-size: .8rem; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-breadcrumbs a { color: inherit; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-empty-state { display: grid; justify-items: center; gap: 12px; padding: 70px 20px; border: 1px dashed var(--hxck-border); background: var(--hxck-surface); text-align: center; }

  .hxck-design-system-{{ ai_gen_id }} .hxck-discord-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 48px 0; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--hxck-border); border-radius: var(--hxck-radius); background: linear-gradient(120deg, var(--hxck-surface-2), var(--hxck-surface)); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-footer { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 40px; margin-top: 64px; padding: 48px clamp(18px, 4vw, 56px); border-top: 1px solid var(--hxck-border); background: var(--hxck-surface); }
  .hxck-design-system-{{ ai_gen_id }} .hxck-footer a { color: var(--hxck-text-secondary); text-decoration: none; }
  .hxck-design-system-{{ ai_gen_id }} .hxck-footer a:hover { color: var(--hxck-accent); }

  .hxck-design-system-{{ ai_gen_id }} :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--hxck-accent); outline-offset: 3px; }

  @media screen and (max-width: 989px) { .hxck-design-system-{{ ai_gen_id }} .hxck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media screen and (max-width: 749px) {
    .hxck-design-system-{{ ai_gen_id }} { width: 100%; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-header { min-height: 60px; padding: 12px 16px; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-grid { gap: 12px; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-card__content { padding: 13px; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-card__button { width: 100%; padding: 0 10px; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-discord-cta { align-items: stretch; flex-direction: column; margin: 32px 0; }
    .hxck-design-system-{{ ai_gen_id }} .hxck-footer { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding: 36px 16px; }
  }
{% endstyle %}

<div class="hxck-design-system-{{ ai_gen_id }}" {{ block.shopify_attributes }} aria-hidden="true"></div>

{% schema %}
{
  "name": "HXCKDEV design system",
  "settings": [
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Desktop width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    }
  ],
  "presets": [
    {
      "name": "HXCKDEV design system"
    }
  ],
  "tag": null,
  "class": "hxck-design-system-block"
}
{% endschema %}