/* ============================================================
   CRACKSHOT.GG — custom.css
   Reskins the Sellauth default theme with the crackshot brand:
   deep near-black/violet base, blaze-red accent, Archivo Black
   display type, and a tactical-HUD corner-bracket treatment.

   Paste this whole file into: Themes -> (your theme) -> Code
   Editor -> assets/custom.css -> Save -> Apply.
   This file survives future theme updates.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap');

/* ---- 1. Brand tokens -----------------------------------------
   These are the same CSS variables the theme already uses for
   every color/type/radius decision site-wide (buttons, cards,
   borders, nav, footer). Changing them here reskins everything
   downstream without touching a single template. */
:root {
      --cl-background: 14, 11, 20 !important;
      --cl-surface: 26, 20, 40 !important;
      --cl-t-primary: 237, 233, 247 !important;
      --cl-t-muted: 148, 143, 168 !important;
      --cl-border: rgba(124, 77, 255, 0.16) !important;
      --cl-accent: 224, 35, 63 !important;
      --cl-on-accent: 255, 255, 255 !important;

      --ff-heading: 'Archivo Black', ui-sans-serif, system-ui, sans-serif !important;
      --ff-body: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
      --fw-heading: 400 !important;

      --radius-card: 4px !important;
      --radius-input: 4px !important;
      --radius-button: 4px !important;
}

/* ---- 2. Hero section ------------------------------------------
   Recolor the theme's own decorative glow blob, add a subtle
   scanline texture, and frame the hero content in HUD corner
   brackets. */
.sa-hero {
  position: relative;
}

.hero-bg-glow {
  background: radial-gradient(closest-side, rgba(224,35,63,0.35), rgba(124,77,255,0.12) 60%, transparent 80%) !important;
}

.sa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  z-index: 0;
}

.sa-hero-title {
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* corner-bracket frame, built from stacked background gradients
   so it needs no extra markup — applied to the hero's inner wrap */
.sa-hero .wrap {
  position: relative;
}
.sa-hero .wrap::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(224,35,63,0.9) 2px, transparent 2px) top left / 20px 2px no-repeat,
    linear-gradient(to bottom, rgba(224,35,63,0.9) 2px, transparent 2px) top left / 2px 20px no-repeat,
    linear-gradient(to left, rgba(224,35,63,0.9) 2px, transparent 2px) top right / 20px 2px no-repeat,
    linear-gradient(to bottom, rgba(224,35,63,0.9) 2px, transparent 2px) top right / 2px 20px no-repeat,
    linear-gradient(to right, rgba(224,35,63,0.9) 2px, transparent 2px) bottom left / 20px 2px no-repeat,
    linear-gradient(to top, rgba(224,35,63,0.9) 2px, transparent 2px) bottom left / 2px 20px no-repeat,
    linear-gradient(to left, rgba(224,35,63,0.9) 2px, transparent 2px) bottom right / 20px 2px no-repeat,
    linear-gradient(to top, rgba(224,35,63,0.9) 2px, transparent 2px) bottom right / 2px 20px no-repeat;
}

/* ---- 3. Section titles ("Products", etc.) --------------------- */
.sa-section-title {
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- 4. Product cards ------------------------------------------
   Cards already get their HUD-bracket treatment from the product
   artwork itself, so keep the card chrome quiet — just a crisp
   accent-glow on hover so the grid feels alive without clashing
   with the art. */
.sa-product-card {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.sa-product-card:hover {
  border-color: rgba(224,35,63,0.55) !important;
  box-shadow: 0 0 0 1px rgba(224,35,63,0.35), 0 20px 40px -24px rgba(224,35,63,0.45);
}

/* ---- 5. Buttons -------------------------------------------------- */
.sa-btn--primary.bg-accent-500 {
  letter-spacing: 0.02em;
}
.sa-btn--primary.bg-accent-500:hover {
  box-shadow: 0 0 0 1px rgba(224,35,63,0.5), 0 8px 24px -8px rgba(224,35,63,0.55);
}

/* ---- 6. Header / nav ---------------------------------------------- */
.sa-header {
  border-bottom: 1px solid rgba(124,77,255,0.14);
  backdrop-filter: blur(10px);
}
.sa-navbar-link:hover {
  color: rgb(224,35,63) !important;
}

/* ---- 7. Footer ------------------------------------------------------ */
.sa-footer {
  background: linear-gradient(180deg, rgba(124,77,255,0.05), transparent);
}