/* ============================================================================
   theRESISTshop — Per-garment apparel generator (/generator/tshirt,
   /generator/hoodie). Loaded ALONGSIDE generic-apparel-ui.css, which still
   owns the card grid (.rs-ga-cards / .rs-ga-card), swatch/size rows, the
   right-hand preview panel internals (.rs-gen-panel--preview, .stage,
   .rs-ga-variant, .rs-ga-cta, .rs-ga-ayo, .rs-btn-*) and the category
   buttons (.rs-ga-cat). This file only adds what's new for the unified
   layout: the hero band, the horizontal top bar (Collections + Categories
   + Style), and the full-width grid / sticky-preview two-column body.

   Classes are .rs-ag-* (apparel generator). Tokens (--rs-*) come from
   Layout.astro's global :root.
   ============================================================================ */

/* --- Hero band ---------------------------------------------------------- */
.rs-ag-hero {
  padding: 28px 32px 20px;
  background: var(--rs-black);
  color: var(--rs-white);
}
.rs-ag-breadcrumb { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: #b8b8b8; margin: 0 0 10px; }
.rs-ag-breadcrumb a { color: #b8b8b8; }
.rs-ag-breadcrumb a:hover { color: var(--rs-white); }
.rs-ag-breadcrumb span[aria-current] { color: var(--rs-white); }
.rs-ag-h1 { font-family: var(--rs-font-display); font-size: 46px; line-height: 0.95; text-transform: uppercase; margin: 0 0 10px; }
.rs-ag-tagline { font-size: 14px; color: #d6d6d6; margin: 0; max-width: 52ch; }
@media (max-width: 900px) { .rs-ag-h1 { font-size: 36px; } }

/* --- Horizontal top bar: Collections + Style + Categories ------------- */
.rs-ag-topbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--rs-line);
  background: var(--rs-offwhite);
}
.rs-ag-bar-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 14px;
}
/* `display: grid` above beats [hidden]'s UA `display: none`, so the Style row
   (non-text collections) and Categories row (RHN) need this explicit rule to
   actually hide. */
.rs-ag-bar-row[hidden] { display: none; }
.rs-ag-bar-label {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--rs-gray);
  padding-top: 10px;
}
.rs-ag-tabs, .rs-ag-cats, .rs-ag-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

/* Collection tabs — same button language as CollectionsBanner.astro's
   .rs-collections-tab (that component's styles are scoped, so the look is
   restated here rather than shared). */
.rs-ag-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--rs-black);
  background: var(--rs-white);
  border: 1px solid var(--rs-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rs-ag-tab:hover, .rs-ag-tab:focus-visible {
  border-color: var(--rs-red);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.rs-ag-tab--active {
  border-color: var(--rs-red);
  background: var(--rs-red);
  color: var(--rs-white);
  box-shadow: 0 2px 6px rgba(200, 16, 46, 0.35);
}

/* Text style chips — compact, text-only (a 9-thumbnail strip is too bulky
   for a bar row). */
.rs-ag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  color: var(--rs-black);
  background: var(--rs-white);
  border: 1px solid var(--rs-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.rs-ag-chip:hover, .rs-ag-chip:focus-visible { border-color: var(--rs-red); }
.rs-ag-chip--active { background: var(--rs-black); border-color: var(--rs-black); color: var(--rs-white); }

@media (max-width: 640px) {
  .rs-ag-hero { padding: 20px; }
  .rs-ag-topbar { padding: 16px 20px; }
  .rs-ag-bar-row { grid-template-columns: 1fr; gap: 6px; }
  .rs-ag-bar-label { padding-top: 0; }
}

/* --- Body: full-width card grid + sticky preview column -------------- */
.rs-ag-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  padding: 32px;
}
.rs-ag-main { min-width: 0; }
.rs-ag-panel { position: sticky; top: 20px; }
@media (max-width: 900px) {
  .rs-ag-body { grid-template-columns: 1fr; }
  .rs-ag-panel { position: static; max-width: 420px; }
}

/* The card grid fills the whole left column now that the sidebar is gone.
   generic-apparel-ui.css already sets .rs-ga-cards to repeat(3,1fr) ->
   repeat(2,1fr) <=1100px -> 1fr <=480px; that carries over unchanged, the
   cards are simply wider. */

/* The manual background picker was removed 2026-09-03 (owner review: 18
   explicit choices read as clutter). Each design card now carries its own
   randomised scenery and the large Preview adopts the picked card's scene
   -- see apparel-generator.js's sceneForCard(). No picker CSS remains. */