/* ==========================================================================
   100% Juice — shared stylesheet
   Dark VAPORWAVE theme: near-black background, neon pink/cyan/purple glows,
   a faint perspective grid + gradient sunset behind the hero, rounded neon
   cards, and chunky squishy buttons. Plain CSS, no preprocessor, no build step.
   ========================================================================== */

:root {
  /* Core palette */
  --bg: #0d0221;            /* near-black purple */
  --bg-2: #1a0b2e;          /* panel base */
  --panel: #16082b;
  --text: #f0f0f5;          /* body copy — light, readable */
  --muted: #c3b0e6;         /* secondary lavender */
  --muted-dim: #9a86c4;

  /* Neon accents */
  --pink: #ff2bd6;
  --pink-soft: #ff71ce;
  --cyan: #01cdfe;
  --purple: #b967ff;
  --yellow: #f5d300;

  /* Legacy aliases kept so old selectors/gradients keep working */
  --orange: var(--pink);
  --orange-deep: var(--pink);
  --cream: var(--bg);
  --cream-deep: rgba(255, 255, 255, 0.06);
  --ink: var(--text);
  --white: rgba(255, 255, 255, 0.08);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 43, 214, 0.16);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 34px rgba(185, 103, 255, 0.28);
  --glow-pink: 0 0 18px rgba(255, 43, 214, 0.55);
  --glow-cyan: 0 0 18px rgba(1, 205, 254, 0.55);
  --font: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Reset-ish --- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Backdrop: gradient glow + faint perspective grid --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% -10%, rgba(185, 103, 255, 0.30), transparent 55%),
    radial-gradient(circle at 84% 4%, rgba(1, 205, 254, 0.20), transparent 52%),
    radial-gradient(circle at 50% 108%, rgba(255, 43, 214, 0.22), transparent 60%),
    var(--bg);
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(1, 205, 254, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 43, 214, 0.20) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  transform: perspective(320px) rotateX(60deg);
  transform-origin: bottom center;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, transparent 90%);
}

img { max-width: 100%; display: block; }

a {
  color: var(--cyan);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(1, 205, 254, 0.35);
}
a:hover { text-decoration: underline; }

/* ==========================================================================
   Top bar: hamburger left, cart right
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(13, 2, 33, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(1, 205, 254, 0.35);
  box-shadow: 0 0 22px rgba(1, 205, 254, 0.22);
}

.hamburger {
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 43, 214, 0.12);
  color: var(--text);
  border: 2px solid var(--pink);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--glow-pink);
  transition: transform 0.15s ease, background 0.15s ease;
}
.hamburger:hover { background: rgba(255, 43, 214, 0.28); transform: scale(1.06); }

.cart-indicator {
  font-size: 18px;
  font-weight: 600;
  background: rgba(1, 205, 254, 0.12);
  border: 2px solid var(--cyan);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text);
  box-shadow: var(--glow-cyan);
  transition: transform 0.15s ease, background 0.15s ease;
}
.cart-indicator:hover {
  text-decoration: none;
  background: rgba(1, 205, 254, 0.26);
  transform: scale(1.06);
}
#cart-count { font-weight: 700; color: var(--yellow); }

/* ==========================================================================
   Sidebar (slide-out)
   ========================================================================== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 0, 15, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 50;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;              /* full-height slide */
  width: min(78vw, 300px);
  background: linear-gradient(180deg, #1c0a35, #0d0221);
  border-right: 1px solid rgba(255, 43, 214, 0.45);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(255, 43, 214, 0.3);
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 60;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar.open { transform: translateX(0); }

.sidebar-close {
  align-self: flex-end;
  font-size: 26px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: rgba(1, 205, 254, 0.12);
  color: var(--text);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}
.sidebar-close:hover { background: rgba(1, 205, 254, 0.3); }

.sidebar a {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.sidebar a:hover {
  background: rgba(255, 43, 214, 0.14);
  border-color: rgba(255, 43, 214, 0.45);
  text-decoration: none;
  transform: translateX(4px);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 18px 80px;
}

.page-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--pink-soft); /* fallback if gradient text unsupported */
  background: linear-gradient(90deg, var(--pink-soft), var(--cyan) 55%, var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 43, 214, 0.35));
}

.lede { font-size: 18px; color: var(--muted); }

/* ==========================================================================
   Buttons (chunky, squishy)
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  color: #100020;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink) 45%, var(--purple));
  border: none;
  border-radius: 999px;
  padding: 16px 34px;
  cursor: pointer;
  box-shadow: var(--shadow), var(--glow-pink);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  filter: brightness(1.12) saturate(1.15);
  transform: scale(1.06);
  box-shadow: var(--shadow-lg), 0 0 26px rgba(255, 43, 214, 0.7);
}
.btn:active { transform: scale(0.96); }

.btn-yellow {
  background: linear-gradient(135deg, var(--yellow), #ffb000);
  color: #1a1200;
  box-shadow: var(--shadow), 0 0 18px rgba(245, 211, 0, 0.5);
}
.btn-yellow:hover { filter: brightness(1.08); }

.btn-ghost {
  background: rgba(1, 205, 254, 0.08);
  color: var(--cyan);
  border: 2px solid var(--cyan);
  box-shadow: var(--glow-cyan);
}
.btn-ghost:hover { background: rgba(1, 205, 254, 0.2); }

/* ==========================================================================
   Home page
   ========================================================================== */
.hero {
  position: relative;
  text-align: center;
  padding: 40px 18px 20px;
}

/* Sunburst glow behind the hero — pure CSS, no images */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;
  width: min(1100px, 130vw);
  height: 520px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 42%,
      rgba(255, 43, 214, 0.10) 0deg 7deg,
      rgba(255, 43, 214, 0) 7deg 14deg
    ),
    radial-gradient(circle at 50% 42%, rgba(255, 113, 206, 0.28), transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  opacity: 0.9;
}

/* The real shirt artwork as the top banner */
.hero-banner {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  filter: drop-shadow(0 0 30px rgba(255, 43, 214, 0.45))
          drop-shadow(0 0 60px rgba(1, 205, 254, 0.3));
}

.tagline {
  font-size: clamp(20px, 3.5vw, 32px);
  font-weight: 600;
  color: var(--cyan);
  margin: 28px 0 34px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 18px rgba(1, 205, 254, 0.65), 0 0 34px rgba(255, 43, 214, 0.4);
}

.home-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.home-buttons .btn { font-size: 24px; padding: 20px 44px; }

/* ==========================================================================
   Product cards
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.card {
  background: linear-gradient(160deg, rgba(38, 14, 66, 0.94), rgba(15, 4, 34, 0.94));
  border: 1px solid rgba(255, 43, 214, 0.45);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: var(--shadow-lg), 0 0 26px rgba(1, 205, 254, 0.4);
}

.card-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  filter: drop-shadow(0 0 10px rgba(1, 205, 254, 0.25));
}

.card-name { font-size: 20px; font-weight: 700; margin: 4px 0 0; color: var(--text); }
.card-desc { font-size: 14px; color: var(--muted); margin: 0; }
.card-meta { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--muted); }
.card-price { color: var(--cyan); text-shadow: 0 0 10px rgba(1, 205, 254, 0.5); }
.card .btn { margin-top: auto; width: 100%; text-align: center; font-size: 17px; padding: 12px; }

/* ==========================================================================
   Cart
   ========================================================================== */
.cart-section {
  margin-top: 48px;
  background: linear-gradient(160deg, rgba(30, 10, 55, 0.9), rgba(13, 2, 33, 0.9));
  border: 1px solid rgba(185, 103, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(185, 103, 255, 0.35);
}
.cart-line:last-of-type { border-bottom: none; }

.cart-line img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 4px;
}
.cart-line .cart-info { flex: 1; min-width: 120px; }
.cart-line .cart-name { font-weight: 700; }
.cart-line .cart-sub { font-size: 14px; color: var(--muted-dim); }

.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(245, 211, 0, 0.85);
  color: #1a1200;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, transform 0.12s ease;
}
.qty-btn:hover { background: var(--pink); color: #100020; transform: scale(1.08); }

.remove-btn {
  border: none;
  background: transparent;
  color: var(--pink-soft);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
}
.remove-btn:hover { text-decoration: underline; }

.cart-empty { color: var(--muted); font-style: italic; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout {
  position: relative;              /* positioning context for the invisible jump overlay */
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid rgba(1, 205, 254, 0.3);
}
.checkout h3 { margin-top: 0; }

.fulfill-label { font-weight: 600; color: var(--muted); margin-bottom: 10px; }

/* Local pickup stays in normal flow (left side, never moves). The Ship button is
   NOT a flow sibling — app.js parks it flush right of this button so the pair
   reads as a normal side-by-side choice, with no reserved space between them. */

/* Invisible jump overlay — spans the whole checkout card so the Ship button can
   flee anywhere inside it. Renders nothing (no border/background/size) and
   pointer-events:none, so it never blocks the name input or the pickup button;
   only the Ship button itself sets pointer-events:auto. */
.escape-arena {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.round-btn {
  min-width: 130px;
  height: 60px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid var(--cyan);
  background: rgba(1, 205, 254, 0.12);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.round-btn:hover { background: rgba(1, 205, 254, 0.3); transform: scale(1.05); box-shadow: var(--glow-cyan); }
.round-btn.selected {
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #100020;
  border-color: var(--pink);
  box-shadow: var(--shadow), var(--glow-pink);
}

/* The Ship button is absolutely positioned by JS inside the invisible overlay.
   It starts hidden so it can't flash at the card's corner before JS places it
   at rest beside Local pickup. */
.ship-btn {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  z-index: 20;
  pointer-events: auto;
  visibility: hidden;
  border-color: var(--pink);
  background: rgba(255, 43, 214, 0.18);
  box-shadow: var(--glow-pink);
}

.taunt {
  display: block;
  min-height: 20px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pink-soft);
  font-style: italic;
  text-shadow: 0 0 12px rgba(255, 43, 214, 0.5);
}

.checkout-notice {
  margin-top: 12px;
  font-weight: 600;
  color: var(--cyan);
  min-height: 22px;
  text-shadow: 0 0 12px rgba(1, 205, 254, 0.4);
}

.order-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; color: var(--muted); }
.field input {
  font-family: var(--font);
  font-size: 17px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(1, 205, 254, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  min-width: 200px;
}
.field input::placeholder { color: var(--muted-dim); }
.field input:focus {
  outline: none;
  border-color: var(--pink);
  background: rgba(255, 43, 214, 0.08);
  box-shadow: var(--glow-pink);
}

.order-total { font-size: 20px; font-weight: 700; margin-top: 14px; color: var(--yellow); }

/* Confirmation screen */
.confirm {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(185, 103, 255, 0.22), rgba(1, 205, 254, 0.14));
  border: 1px solid rgba(255, 43, 214, 0.55);
  box-shadow: var(--shadow-lg);
}
.confirm h3 { margin-top: 0; color: var(--pink-soft); }
.confirm pre {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(5, 0, 15, 0.75);
  color: var(--text);
  padding: 14px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  border: 1px solid rgba(1, 205, 254, 0.3);
}

/* ==========================================================================
   Projects / placeholder cards
   ========================================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 26px;
}
.project-card {
  background: linear-gradient(160deg, rgba(38, 14, 66, 0.94), rgba(15, 4, 34, 0.94));
  border: 1px solid rgba(185, 103, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(1, 205, 254, 0.35);
}
.project-card h3 { margin-top: 0; color: var(--pink-soft); }
.project-card p { color: var(--muted); }
.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--yellow), #ffb000);
  color: #1a1200;
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 0 12px rgba(245, 211, 0, 0.45);
}

/* ==========================================================================
   Donate
   ========================================================================== */
.donate-card {
  max-width: 420px;
  margin: 30px auto;
  background: linear-gradient(160deg, rgba(38, 14, 66, 0.95), rgba(15, 4, 34, 0.95));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  text-align: center;
  border: 2px solid var(--cyan);
}
.donate-card h1 {
  margin-top: 0;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--pink-soft);
  text-shadow: 0 0 18px rgba(255, 43, 214, 0.5);
}
.donate-card .lede { color: var(--muted); }
.donate-card img {
  border-radius: var(--radius);
  margin: 18px auto 8px;
  max-width: 300px;
  background: #ffffff;          /* QR stays on white so it scans */
  padding: 10px;
  border: 2px solid rgba(185, 103, 255, 0.5);
  box-shadow: 0 0 22px rgba(185, 103, 255, 0.35);
}

/* ==========================================================================
   Rename tool (private contact sheet, docs/rename.html)
   ========================================================================== */
.tool-note {
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(38, 14, 66, 0.9), rgba(15, 4, 34, 0.9));
  border: 1px solid rgba(255, 43, 214, 0.45);
  box-shadow: var(--shadow);
  color: var(--muted);
}
.tool-note h1 {
  margin: 0 0 8px;
  color: var(--pink-soft);
  font-size: clamp(24px, 4vw, 34px);
  text-shadow: 0 0 16px rgba(255, 43, 214, 0.45);
}
.tool-note ol { margin: 8px 0 0; padding-left: 20px; }
.tool-note li { margin: 4px 0; }

.rename-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.rename-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(38, 14, 66, 0.94), rgba(15, 4, 34, 0.94));
  border: 1px solid rgba(1, 205, 254, 0.4);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rename-card:hover { border-color: var(--pink); box-shadow: var(--shadow-lg); }
.rename-card .uuid {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-dim);
  word-break: break-all;
}
.rename-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.rename-card .current {
  font-size: 13px;
  color: var(--muted);
}
.rename-card .current strong { color: var(--text); }
.rename-field { display: flex; flex-direction: column; gap: 4px; }
.rename-field label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.rename-field input,
.rename-field textarea {
  font-family: var(--font);
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(1, 205, 254, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  width: 100%;
  resize: vertical;
}
.rename-field input:focus,
.rename-field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: var(--glow-pink);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 30px 0 14px;
}

.code-out {
  width: 100%;
  min-height: 340px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(185, 103, 255, 0.5);
  background: rgba(5, 0, 15, 0.85);
  color: var(--text);
  box-shadow: var(--shadow);
}
.copy-status { color: var(--cyan); font-weight: 600; min-height: 22px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 620px) {
  .home-buttons .btn { width: 100%; }
  .cart-line { flex-wrap: wrap; }
}

/* Respect reduced-motion: keep layout, drop the bouncy bits */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}