/* Shared global styles for InStock Trade site.
   Imported by both index.html (homepage) and stock.html (subpage). */

@keyframes vaSkelPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.va-skel { animation: vaSkelPulse 1.1s ease-in-out infinite; }

/* "Zobacz pełny stock" CTA — orange accent, eye-catching.
   On first paint a strong double-ring pulse fires 4× to grab attention.
   After that a slow "breathing" pulse keeps drawing the eye without
   being annoying. Honours prefers-reduced-motion. */
@keyframes vaStocklinkBurst {
  0% {
    box-shadow:
      0 0 0 0   rgba(217, 119, 87, 0.85),
      0 0 0 0   rgba(217, 119, 87, 0.55);
    transform: translateY(0) scale(1);
  }
  40% {
    box-shadow:
      0 0 0 18px rgba(217, 119, 87, 0.0),
      0 0 0 30px rgba(217, 119, 87, 0.0);
    transform: translateY(-3px) scale(1.03);
  }
  100% {
    box-shadow:
      0 0 0 0  rgba(217, 119, 87, 0.0),
      0 0 0 0  rgba(217, 119, 87, 0.0);
    transform: translateY(0) scale(1);
  }
}
@keyframes vaStocklinkBreathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(217, 119, 87, 0);
  }
}
.va-stocklink-cta {
  /* Warm coffee-brown fill — sits in the brand's dark range but softer
     than pure ink, so it doesn't clash with the Discord blue / WhatsApp
     green CTAs sitting above. The orange pulse glow is the only accent. */
  background: #221913 !important;
  border-color: #221913 !important;
  color: #f6f1e7 !important;
  /* Two stacked animations: 4 strong bursts (1.2s each) then handing
     off to a slow breathing pulse that loops forever. */
  animation:
    vaStocklinkBurst 1.2s ease-out 0.3s 4,
    vaStocklinkBreathe 2.4s ease-in-out 5.1s infinite;
  animation-fill-mode: both;
}
.va-stocklink-cta:hover {
  /* Hover flips to the orange accent — strong tactile feedback, only
     happens on intentional interaction so it doesn't compete passively
     with Discord/WhatsApp colours. */
  background: #D97757 !important;
  border-color: #D97757 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  animation-play-state: paused;
}
.va-stocklink-cta:hover .va-stocklink-arrow {
  transform: translateX(6px);
}
.va-stocklink-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .va-stocklink-cta { animation: none; }
}

html, body {
  margin: 0; padding: 0;
  background: #f1ede4; min-height: 100%;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #16110d;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }

/* Sneaker placeholder helpers used by product cards */
.sneaker-ph {
  position: relative; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px),
    var(--ph-bg, #ebe7df);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sneaker-ph::after {
  content: attr(data-label);
  position: absolute; inset: auto 0 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .04em; color: rgba(0,0,0,.45);
  text-transform: uppercase;
}
.sneaker-ph svg { width: 70%; height: auto; opacity: .85; }
#root { min-height: 100vh; }

/* ── Mobile responsive overrides (≤ 760px) ───────────────────── */
/* Inline React styles win by specificity, so we use !important on
   a handful of layout properties to flip the grids and sizes. */
@media (max-width: 760px) {
  /* Topbar: 4-col grid on mobile. Row 1 = brand + lang button;
     row 2 = the 4 nav links. */
  .va-topbar { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: stretch !important; }
  .va-topbar-brand { grid-row: 1 !important; grid-column: 1 / 4 !important; padding: 12px 14px !important; font-size: 13px !important; }
  .va-topbar-tagline { display: none !important; }
  .va-topbar-spacer { display: none !important; }
  .va-topbar-lang { grid-row: 1 !important; grid-column: 4 !important; padding: 11px 14px !important; font-size: 12px !important; }
  .va-topbar-link { grid-row: 2 !important; padding: 11px 6px !important; font-size: 11px !important; justify-content: center !important; text-align: center !important; border-top: 2px solid #16110d !important; border-left: 2px solid #16110d !important; }
  .va-topbar-link:nth-of-type(1) { border-left: none !important; }

  /* — Homepage specific — */
  .va-eyebrow { padding: 14px 18px 0 !important; font-size: 10px !important; }
  .va-hero-comp { grid-template-columns: 1fr !important; padding: 18px 18px 24px !important; gap: 18px !important; }
  .va-hero-logo svg { width: 110px !important; height: 110px !important; }
  .va-hero-h1 { font-size: 64px !important; line-height: .9 !important; letter-spacing: -.035em !important; }
  .va-hero-h1-tm { font-size: 26px !important; }
  .va-hero-bottom { grid-template-columns: 1fr !important; }
  .va-hero-sub { padding: 16px 18px !important; font-size: 16px !important; border-right: none !important; border-bottom: 2px solid #16110d !important; }
  .va-cta-discord { border-right: none !important; border-bottom: 2px solid #16110d !important; padding: 18px !important; font-size: 18px !important; }
  .va-cta-whatsapp { padding: 18px !important; font-size: 18px !important; }
  .va-stockhead { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 18px !important; }
  .va-stockhead h2 { font-size: 22px !important; }
  .va-stockhead-meta { font-size: 11px !important; }
  .va-stocklink { font-size: 12px !important; flex: 0 0 100% !important; }
  .va-stockgrid { grid-template-columns: 1fr 1fr !important; }
  .va-stockgrid > * { border-right: 2px solid #16110d !important; border-bottom: 2px solid #16110d !important; }
  .va-stockgrid > *:nth-child(2n) { border-right: none !important; }
  .va-stockgrid > *:nth-last-child(-n+2) { border-bottom: none !important; }
  .va-process { grid-template-columns: 1fr !important; }
  .va-process > * { border-right: none !important; border-bottom: 2px solid #16110d !important; }
  .va-process > *:last-child { border-bottom: none !important; }
  .va-process-head { padding: 18px !important; }
  .va-process-head .va-process-title { font-size: 24px !important; }
  .va-process-step { padding: 18px !important; }
  .va-process-step .va-process-num { font-size: 44px !important; }
  .va-main { grid-template-columns: 1fr !important; }
  .va-main > *:first-child { border-right: none !important; border-bottom: 2px solid #16110d !important; padding: 22px 18px !important; }
  .va-main > *:last-child > * { padding: 22px 18px !important; }
  .va-form-row { grid-template-columns: 1fr !important; }
  .va-form-row > *:first-child { border-right: none !important; border-bottom: 2px solid #16110d !important; }
  .va-form-title { font-size: 26px !important; }
  .va-footer { grid-template-columns: 1fr 1fr !important; padding: 22px 18px !important; gap: 18px !important; }
  .va-footer > *:first-child { grid-column: 1 / -1 !important; }

  /* — Stock subpage — */
  .sp-h1 { font-size: 48px !important; letter-spacing: -.03em !important; }
  .sp-headrow { grid-template-columns: 1fr !important; gap: 18px !important; align-items: stretch !important; }
  .sp-headrow > * { justify-self: stretch !important; min-width: 0 !important; }
  .sp-filters { grid-template-columns: 1fr !important; }
  .sp-filters > * { border-right: none !important; border-bottom: 2px solid #16110d !important; padding: 14px 18px !important; }
  .sp-filters > *:last-child { border-bottom: none !important; }
  .sp-grid { grid-template-columns: 1fr 1fr !important; }
  .sp-grid > * { border-right: 2px solid #16110d !important; border-bottom: 2px solid #16110d !important; }
  .sp-grid > *:nth-child(2n) { border-right: none !important; }
}