/* =============================================================================
   RepBox — home.css (index.html only; layered on css/base.css, never edits it)
   The shop grid is the page. Everything under the grid is compact.
   00  hero (crate + glyph tiles)
   01  page stack + toolbar (theme tabs, search, sort, reset, hint)
   02  grid entrance + empty state
   03  section head (compact, display title with one accent word)
   04  how it works tiles (REPBOX.howItWorks)
   07  faq columns (REPBOX.faq)
   08  reduced motion
   ============================================================================= */


/* ---------------------------------------------------------------------------
   00 HERO  (variant a: copy + scene side by side; variant b: scene only + one button)
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(60% 70% at 72% 62%, rgba(var(--accent-rgb), .14), transparent 70%),
    linear-gradient(135deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: -1px; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .45);
  pointer-events: none;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.hero .eyebrow { letter-spacing: .12em; white-space: nowrap; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 12vw, 72px);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}
.hero__title em { font-style: normal; color: var(--accent); text-shadow: var(--accent-text-glow); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hero__actions .btn { flex: 1 1 auto; }

/* the scene: crate centred low, pieces orbiting it */
.hero__scene { position: relative; height: 300px; min-width: 0; }
.hero__floor {
  position: absolute; left: 50%; bottom: 8%; width: 78%; height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .06) 55%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__crate { position: absolute; left: 50%; bottom: 0; width: 56%; max-width: 300px; transform: translateX(-50%); }
.hero__crate .box-art { width: 100%; display: block; }
.hero__piece {
  position: absolute;
  width: 20%;
  max-width: 96px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  animation: floatY 6s ease-in-out infinite;
  transform-origin: center;
}
.hero__piece svg { width: 100%; height: auto; display: block; }
.hero__piece--sneakers { left: 68%; top: 4%;  width: 25%; max-width: 116px; animation-duration: 6.5s; rotate: 6deg; }
.hero__piece--hoodie   { left: 4%;  top: 12%; animation-duration: 7s;   animation-delay: -2s; rotate: -6deg; }
.hero__piece--pants    { left: 8%;  top: 56%; animation-duration: 5.6s; animation-delay: -1s; rotate: 4deg; }
.hero__piece--tee      { left: 78%; top: 48%; animation-duration: 6.2s; animation-delay: -3s; rotate: -5deg; }
.hero__piece--hat      { left: 33%; top: 0;   width: 17%; max-width: 80px; animation-duration: 5.2s; animation-delay: -1.6s; rotate: -8deg; }
.hero__piece--watch    { left: 72%; top: 76%; width: 15%; max-width: 72px; animation-duration: 5.8s; animation-delay: -2.6s; rotate: 8deg; }

/* variant b: no copy, scene full width, one centred button over the floor */
.hero__cta-b { display: none; }
.hero[data-variant="b"] .hero__copy { display: none; }
.hero[data-variant="b"] .hero__scene { height: 280px; }
.hero[data-variant="b"] .hero__crate { width: 44%; max-width: 280px; }
.hero[data-variant="b"] .hero__cta-b { display: inline-flex; justify-self: center; min-width: 220px; margin-top: 4px; }
.hero[data-variant="b"] .hero__piece--sneakers { left: 66%; top: 10%; }
.hero[data-variant="b"] .hero__piece--hoodie { left: 12%; top: 16%; }
.hero[data-variant="b"] .hero__piece--pants { left: 16%; top: 58%; }
.hero[data-variant="b"] .hero__piece--tee { left: 74%; top: 52%; }
.hero[data-variant="b"] .hero__piece--hat { left: 40%; top: 2%; }
.hero[data-variant="b"] .hero__piece--watch { left: 66%; top: 76%; }

@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 16px 24px; padding: 24px 28px; }
  .hero__title { font-size: clamp(48px, 4.6vw, 66px); }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__scene { height: 340px; }
  .hero[data-variant="b"] { grid-template-columns: 1fr; }
  .hero[data-variant="b"] .hero__scene { height: 360px; }
  .hero[data-variant="b"] .hero__crate { width: 30%; }
  .hero[data-variant="b"] .hero__piece { width: 12%; }
  .hero[data-variant="b"] .hero__piece--sneakers { width: 15%; left: 62%; }
  .hero[data-variant="b"] .hero__piece--hoodie { left: 24%; }
  .hero[data-variant="b"] .hero__piece--pants { left: 27%; }
  .hero[data-variant="b"] .hero__piece--tee { left: 66%; }
  .hero[data-variant="b"] .hero__piece--hat { left: 44%; width: 10%; }
  .hero[data-variant="b"] .hero__piece--watch { left: 60%; width: 10%; top: 78%; }
}
@media (min-width: 1100px) { .hero__scene { height: 360px; } }
@media (prefers-reduced-motion: reduce) { .hero__piece { animation: none; } }

/* ---------------------------------------------------------------------------
   01 PAGE STACK + FILTER BAR ADDITIONS
   --------------------------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 12px; }

.shop { display: flex; flex-direction: column; gap: 12px; }


/* ---------------------------------------------------------------------------
   01b TOOLBAR  (replaces the filter card: tabs on the left, search + sort on the right,
   one hairline under it, sitting directly on the grid)
   --------------------------------------------------------------------------- */
.toolbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* column layout (< 900px): the tab strip is a scroll container (min-height 0), so it must never shrink under the tools row */
.toolbar__tabs { flex: 0 0 auto; gap: 2px; margin-inline: calc(-1 * var(--shell-pad)); padding: 0 var(--shell-pad); }
.toolbar .chip {
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: none;
}
.toolbar .chip__count { display: none; }
@media (hover: hover) { .toolbar .chip:hover { color: var(--text); background: var(--surface-2); border-color: transparent; } }
.toolbar .chip.is-active, .toolbar .chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim-2);
  border-color: var(--accent-border);
  box-shadow: none;
  text-shadow: var(--accent-text-glow);
}
.toolbar .chip.is-empty:not(.is-active) { opacity: .45; }
.toolbar__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar .search { flex: 1 1 150px; min-width: 0; }
.toolbar .search__input { min-height: 44px; }
.toolbar .search__clear { width: 44px; height: 44px; right: 0; }
.toolbar .sort { flex: 0 1 148px; min-width: 120px; }
/* phone: the reset pill is icon-only (44px square) so the search keeps room for the query */
.toolbar .fb-reset { padding: 0; width: 44px; justify-content: center; }
.toolbar .fb-reset svg { width: 14px; height: 14px; }
.toolbar .fb-reset__label { display: none; }
.toolbar .sort .select { width: 100%; min-width: 0; min-height: 44px; }
.toolbar .fb-reset { min-height: 44px; }
@media (min-width: 900px) {
  .toolbar .filterbar__hint { flex: 1 1 100%; }
  .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  /* the six tabs need ~520px: when the tools row leaves less (1100-1279 beside the sidebar) they wrap to their own row instead of clipping */
  .toolbar__tabs { flex: 1 1 520px; margin-inline: 0; padding-inline: 0; }
  .toolbar__tools { flex: 0 0 auto; }
  .toolbar .search { flex: 0 0 285px; }
  .toolbar .sort { flex: 0 0 auto; }
  .toolbar .fb-reset { width: auto; padding: 0 12px 0 10px; }
  .toolbar .fb-reset svg { width: 12px; height: 12px; }
  .toolbar .fb-reset__label { display: inline; }
  .toolbar .sort .select { width: auto; min-width: 168px; }
}
@media (min-width: 1440px) { .toolbar .search { flex-basis: 300px; } }

/* reset pill: only rendered when a filter is off its default */
.fb-reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim-2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
.fb-reset svg { width: 12px; height: 12px; }
.fb-reset[hidden] { display: none; }
@media (hover: hover) { .fb-reset:hover { background: var(--accent-dim); border-color: var(--accent); } }
/* at 375 the sort select shrinks to make room for the reset pill instead of wrapping to a fifth row */
.filterbar .sort { flex: 1 1 96px; }
.filterbar .sort .select { min-width: 0; }
.filterbar__count { flex: 0 0 auto; }
@media (min-width: 900px) { .filterbar .sort { flex: 0 0 auto; } }
.filterbar__count small { display: none; color: var(--muted); font-weight: 500; font-size: 13px; }
.filterbar__count.is-partial small { display: inline; }
/* count chips that would turn up nothing are dimmed, never disabled (the active one may be one) */
.filterbar .chip.is-empty:not(.is-active) { opacity: .55; }

/* search hint: "6 lines match “nike” in 2 boxes" (third row, only while searching) */
.filterbar__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 2px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.filterbar__hint b { color: var(--text); font-weight: 700; }
.filterbar__hint q { color: var(--accent); font-weight: 600; quotes: '\201C' '\201D'; }
.filterbar__hint[hidden] { display: none; }
.filterbar__hint-pieces { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.filterbar__hint-piece {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.filterbar__hint-piece small { font-size: 10px; font-weight: 600; color: var(--muted); }
.filterbar__hint-piece--more { border-color: var(--border); background: var(--surface-2); color: var(--text-2); }

/* ---------------------------------------------------------------------------
   02 GRID ENTRANCE + EMPTY STATE
   --------------------------------------------------------------------------- */
/* cards fade up when a filter changes (never on first paint: the initial render carries no class) */
.gcard-grid.is-fresh .gcard { animation: homeCardIn .32s var(--ease-out) both; }
.gcard-grid.is-fresh .gcard:nth-child(2) { animation-delay: .03s; }
.gcard-grid.is-fresh .gcard:nth-child(3) { animation-delay: .06s; }
.gcard-grid.is-fresh .gcard:nth-child(4) { animation-delay: .09s; }
.gcard-grid.is-fresh .gcard:nth-child(5) { animation-delay: .12s; }
.gcard-grid.is-fresh .gcard:nth-child(6) { animation-delay: .15s; }
.gcard-grid.is-fresh .gcard:nth-child(7) { animation-delay: .18s; }
.gcard-grid.is-fresh .gcard:nth-child(8) { animation-delay: .21s; }
.gcard-grid.is-fresh .gcard:nth-child(9) { animation-delay: .24s; }
.gcard-grid.is-fresh .gcard:nth-child(10) { animation-delay: .27s; }
@keyframes homeCardIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
.gcard-grid[hidden] { display: none; }
.shop-empty { padding: 28px 16px 32px; background: var(--surface); border: 1px dashed var(--border-hover); border-radius: var(--radius); }
.shop-empty[hidden] { display: none; }
.shop-empty .empty-state__text q { color: var(--text); font-weight: 600; quotes: '\201C' '\201D'; }

/* ---------------------------------------------------------------------------
   03 SECTION HEAD (compact)
   --------------------------------------------------------------------------- */
.hsec { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.hsec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.hsec__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hsec__titles .eyebrow { letter-spacing: .14em; }
.hsec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 7vw, 40px);
  line-height: .92;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
}
.hsec__title em { font-style: normal; color: var(--accent); text-shadow: var(--accent-text-glow); }
.hsec__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hsec__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.hsec__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.hsec__link::after { content: '\2192'; font-size: 13px; transition: transform var(--dur) var(--ease-out); }
.hsec__link:hover { text-decoration: none; }
@media (hover: hover) { .hsec__link:hover { text-shadow: var(--accent-text-glow); } .hsec__link:hover::after { transform: translateX(4px); } }
@media (min-width: 768px) { .hsec { margin-top: 32px; gap: 14px; } }

/* ---------------------------------------------------------------------------
   04 HOW IT WORKS — three numbered tiles: rows at phone width, one row from 640px
   --------------------------------------------------------------------------- */
.how { display: grid; gap: 8px; }
.how__tile {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px 12px 12px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.how__tile::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
  opacity: .9;
}
.how__num {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--accent);
  text-shadow: var(--accent-text-glow);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.how__body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.how__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.how__text { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.how__pill {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 3px 8px 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* one quiet line under the tiles: who sells the boxes and what the price covers */
.how__note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 2px; }
.how__note[hidden] { display: none; }
@media (min-width: 640px) {
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .how__tile { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 16px 14px; }
  .how__tile::before { inset: 0 16px auto 16px; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
  .how__num { font-size: 40px; }
  .how__title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   07 FAQ — one accordion at phone width, two columns from 900px
   --------------------------------------------------------------------------- */
.faq-cols { display: grid; gap: 8px; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } }

/* ---------------------------------------------------------------------------
   08 REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gcard-grid.is-fresh .gcard { animation: none; }
  .hsec__link::after { transition: none; }
}