/* Zaptiq — neo-brutalist electric (Option B, Jul 2026 redesign)
   Direction: thick ink borders, hard offset shadows, oversized display type,
   sticker badges, lime × black panels, subtle grain. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --zq-paper:  #f4f3ea;
  --zq-ink:    #0d0d0d;
  --zq-lime:   #d7fe3a;
  --zq-lime-dk:#b8e022;
  --zq-muted:  #5c5c54;
  --zq-cloud:  #eceadd;

  --color-paper: var(--zq-paper);
  --color-ink:   var(--zq-ink);
  --color-line:  var(--zq-ink);
  --color-muted: var(--zq-muted);
  --color-cloud: var(--zq-cloud);
}

body {
  background: var(--zq-paper);
  color: var(--zq-ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Oversized shouty display type */
h1, h2, h3, h4, .font-display {
  font-family: "Archivo Black", var(--font-display), sans-serif;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(3rem, 7vw, 5.5rem) !important; }

/* Crank every ink border one notch thicker */
.border-\[2\.5px\]     { border-width: 3px !important; }
.border-b-\[2\.5px\]   { border-bottom-width: 3px !important; }
.border-\[3px\]        { border-width: 4px !important; }
.border-b-\[3px\]      { border-bottom-width: 4px !important; }
.border-y-\[3px\]      { border-top-width: 4px !important; border-bottom-width: 4px !important; }
.border-t-\[3px\]      { border-top-width: 4px !important; }

/* Harder offset shadows */
.shadow-\[3px_3px_0_\#0e0e0e\]   { box-shadow: 5px 5px 0 var(--zq-ink) !important; }
.shadow-\[6px_6px_0_\#0e0e0e\]   { box-shadow: 8px 8px 0 var(--zq-ink) !important; }
.shadow-\[14px_14px_0_\#0e0e0e\] { box-shadow: 14px 14px 0 var(--zq-ink) !important; }

/* Announcement bar + trust marquee: black panels, lime type */
.announcement, .marquee {
  background: var(--zq-ink) !important;
  color: var(--zq-lime) !important;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.announcement *, .marquee * { color: var(--zq-lime) !important; }

/* Wordmark: rotated lime sticker */
header a[data-wordmark] > span {
  background: var(--zq-lime) !important;
  color: var(--zq-ink) !important;
  border: 3px solid var(--zq-ink) !important;
  box-shadow: 4px 4px 0 var(--zq-ink);
  padding: 0.1em 0.35em !important;
  font-family: "Archivo Black", sans-serif;
  display: inline-block;
  transform: rotate(-1.5deg);
}
header a[data-wordmark] > span:last-of-type { transform: rotate(1deg); }

/* Cards: die-cut with heavy outline, lift on hover */
.card {
  border: 3px solid var(--zq-ink) !important;
  border-radius: 0 !important;
  background: #fff;
  box-shadow: 6px 6px 0 var(--zq-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-hover:hover, .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--zq-ink);
}

/* Buttons: chunky stickers that physically press */
.btn {
  border: 3px solid var(--zq-ink) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--zq-ink) !important;
  font-family: "Archivo Black", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--zq-ink) !important; }
.btn-accent { background: var(--zq-lime) !important; color: var(--zq-ink) !important; }
.btn-accent:hover { background: var(--zq-lime-dk) !important; }

/* Sale/eyebrow badges: rotated stickers */
.eyebrow {
  font-family: "Archivo Black", sans-serif;
  letter-spacing: 0.1em;
}
.card .eyebrow.absolute, span.eyebrow.absolute {
  transform: rotate(-4deg);
  border-width: 3px !important;
  box-shadow: 3px 3px 0 var(--zq-ink);
}

/* Hero: lime panel energy + halftone dots */
section.hero, [data-hero] {
  background:
    radial-gradient(circle at 1px 1px, rgba(13,13,13,0.14) 1px, transparent 0) 0 0/14px 14px,
    var(--zq-lime);
  border-bottom: 4px solid var(--zq-ink);
}

/* Search bar: inset brutalist field */
input[type="search"], input[name="q"] {
  border: 3px solid var(--zq-ink) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: inset 3px 3px 0 rgba(13,13,13,0.08);
  font-family: "Space Grotesk", sans-serif;
}

/* Footer stays ink with lime accents */
footer { border-top: 4px solid var(--zq-ink) !important; }
footer .text-accent, footer a:hover { color: var(--zq-lime) !important; }

/* Subtle print grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}