/* ================================================================
   VOLT — STREETWEAR POSTER DESIGN
   Loud cream + black, fluo accents, sharp grid, oversized type.
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Cairo:wght@400;700;900&display=swap");

:root {
  --bg: #fff8e7;
  --paper: #fffdf5;
  --ink: #0a0a0a;
  --line: #0a0a0a;
  --red: #ff3c1f;
  --yellow: #ffd84d;
  --blue: #2d3cff;
  --green: #00d97e;
  --accent: var(--red);
  --muted: #5a5550;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 6px 6px 0 var(--ink);

  --f-disp: "Archivo Black", "Helvetica Neue", sans-serif;
  --f-body: "Space Grotesk", "Helvetica Neue", sans-serif;
  --f-mono: "Space Mono", monospace;
}
html[dir="rtl"] { --f-disp: "Cairo", sans-serif; --f-body: "Cairo", sans-serif; }
html[dir="rtl"] :root { --f-disp: "Cairo", sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--yellow); }

/* ---------- type helpers ---------- */
.poster {
  font-family: var(--f-disp);
  letter-spacing: -0.04em;
  line-height: 0.85;
  text-transform: uppercase;
}
.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: var(--bg);
  border-bottom: 3px solid var(--ink);
}
.nav-ticker {
  background: var(--yellow); color: var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 8px 0; overflow: hidden;
  display: flex;
}
.nav-ticker .track {
  display: flex; gap: 32px; flex-shrink: 0;
  animation: scrollticker 24s linear infinite;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.nav-ticker .track span { padding-inline-end: 32px; }
@keyframes scrollticker { to { transform: translateX(-50%); } }
html[dir="rtl"] .nav-ticker .track { animation-direction: reverse; }

.nav-main {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 24px; padding: 14px 24px;
}
.brand-volt {
  font-family: var(--f-disp); font-size: 28px; letter-spacing: -0.03em;
  background: var(--yellow); color: var(--ink);
  padding: 8px 14px 6px;
  display: inline-block; line-height: 1;
}
.nav-links { display: flex; gap: 24px; justify-content: center; }
.nav-links a {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border: 2px solid transparent;
  transition: all .2s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { border-color: var(--bg); }
.nav-links a.is-active { background: var(--bg); color: var(--ink); }

.nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-actions button, .nav-actions a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); color: var(--bg);
  transition: all .2s var(--ease);
  position: relative;
}
.nav-actions a:hover, .nav-actions button:hover { background: var(--bg); color: var(--ink); }
.nav-actions [data-cart-count]::after {
  content: attr(data-count); position: absolute; top: -10px; inset-inline-end: -10px;
  background: var(--red); color: var(--bg);
  min-width: 22px; height: 22px; border-radius: 0; border: 2px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; padding: 0 4px;
}
[data-cart-count].is-zero::after { display: none; }

.menu-btn { display: none; }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex !important; }
}

.drawer { position: fixed; inset: 0; z-index: 80; background: var(--yellow); color: var(--ink); transform: translateY(-100%); transition: transform .5s var(--ease); }
.drawer.open { transform: none; }
.drawer .x { position: absolute; top: 20px; inset-inline-end: 20px; width: 44px; height: 44px; border: 3px solid var(--ink); display: grid; place-items: center; }
.drawer ul { list-style: none; padding: 80px 24px; }
.drawer ul a { font-family: var(--f-disp); font-size: 64px; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; display: block; padding: 12px 0; border-bottom: 3px solid var(--ink); }

/* ---------- container ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.section { padding: 96px 0; }
@media (max-width: 768px) { .section { padding: 64px 0; } }

/* ---------- buttons (poster style) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  font-family: var(--f-disp); font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  border: 3px solid var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
  position: relative;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn.red { background: var(--red); color: var(--bg); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.yellow { background: var(--yellow); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }

/* ---------- card (product) ---------- */
.card { display: block; position: relative; }
.card .frame {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: var(--paper); border: 3px solid var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 4px 4px 0 var(--ink);
}
.card:hover .frame { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .frame img { transform: scale(1.04); }
.card .sticker {
  position: absolute; top: -10px; inset-inline-start: -10px;
  background: var(--yellow); border: 3px solid var(--ink);
  padding: 6px 12px;
  font-family: var(--f-disp); font-size: 12px; letter-spacing: -0.01em; text-transform: uppercase;
  transform: rotate(-4deg);
}
.card .price-tag {
  position: absolute; bottom: 12px; inset-inline-end: 12px;
  background: var(--ink); color: var(--bg);
  padding: 6px 12px;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px;
}
.card .info { padding: 16px 4px 0; }
.card .name { font-family: var(--f-disp); font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.card .meta { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 6px; }

.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 1100px) { .pgrid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- block-fill section ---------- */
.block {
  background: var(--ink); color: var(--bg);
  padding: 64px 24px; border: 3px solid var(--ink);
}
.block.red { background: var(--red); }
.block.yellow { background: var(--yellow); color: var(--ink); }
.block.blue { background: var(--blue); color: var(--bg); }
.block.cream { background: var(--paper); color: var(--ink); }

/* ---------- chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  transition: all .2s var(--ease);
  cursor: pointer;
}
.chip:hover { background: var(--yellow); }
.chip.is-active { background: var(--ink); color: var(--bg); }

/* ---------- form ---------- */
.field {
  display: block; width: 100%;
  background: var(--paper); border: 3px solid var(--ink);
  padding: 14px 16px; font-family: var(--f-mono); font-size: 14px; color: var(--ink);
  outline: none; transition: background-color .2s;
}
.field:focus { background: var(--yellow); }
.field-label {
  display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 700;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .10s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .22s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .34s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .40s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .46s; }

/* ---------- footer ---------- */
.foot {
  background: var(--ink); color: var(--bg);
  padding: 64px 24px 32px; border-top: 3px solid var(--ink);
}
.foot-big {
  font-family: var(--f-disp);
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  padding-bottom: 32px;
  border-bottom: 3px solid var(--bg);
  margin-bottom: 48px;
  color: var(--yellow);
}
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 768px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.foot-cols h4 { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.foot-cols ul { list-style: none; }
.foot-cols li { padding: 4px 0; }
.foot-cols li a:hover { color: var(--yellow); }
.foot-bottom {
  max-width: 1320px; margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* tweaks panel */
.tw-panel {
  position: fixed; top: 100px; inset-inline-end: 24px; z-index: 90;
  width: 280px; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); padding: 24px;
  transform: translateX(120%); opacity: 0;
  transition: transform .4s var(--ease), opacity .25s;
  box-shadow: 6px 6px 0 var(--ink);
}
.tw-panel.open { transform: none; opacity: 1; }

/* hero specific */
.hero-volt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
  border-bottom: 3px solid var(--ink);
}
@media (max-width: 900px) { .hero-volt { grid-template-columns: 1fr; min-height: auto; } }

[data-cart-count].is-zero::after { display: none; }

/* page transition */
.curtain-volt { background: var(--ink) !important; }