/* ============================================================
   FOSSIL — kit page
   ------------------------------------------------------------
   The cover is a desert: pale sand, a bleached sky, black oil
   lettering dripping down it. So this page swaps the site's
   fire accent for the amber already in style.css :root, plus
   one sand tone read off the artwork. Nav, footer, buttons and
   type stay exactly as everywhere else — same frame, own world,
   the way aura.html does it.
   ============================================================ */

.fossil-page {
  /* Local accent overrides. The token names stay as they are so
     shared components (.btn--fire, .kit-hero__price, chips,
     borders) pick this up without needing FOSSIL variants of
     their own. Both accents are retuned — --amber carries the
     price and several kit-page details, so leaving it on the
     stock orange left one loud fire-coloured element on an
     otherwise sand-toned page. */
  --fire:       #C8A06A;   /* sand, lifted off the dunes in the cover */
  --fire-hover: #D9B47E;
  --fire-glow:  rgba(200, 160, 106, 0.20);
  --amber:      #D9B47E;   /* lighter sand, for the price */
  --amber-dim:  rgba(217, 180, 126, 0.15);
  --amber-glow: rgba(217, 180, 126, 0.25);
  --sand-deep:  #6E5636;   /* shadowed dune */
  --oil:        #0A0908;   /* the dripping lettering */
}

/* Fire-orange buttons would fight the cover. On this page they
   read as struck metal instead — dark face, sand edge. */
.fossil-page .btn--fire {
  background: var(--fire);
  color: var(--oil);
}

.fossil-page .btn--fire:hover {
  background: var(--fire-hover);
  box-shadow: 0 0 32px var(--fire-glow), 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ─── Hero ──────────────────────────────────────────────────── */

.fossil-hero {
  background:
    radial-gradient(ellipse at 22% 8%, rgba(200, 160, 106, 0.16), transparent 42%),
    radial-gradient(ellipse at 82% 62%, rgba(110, 86, 54, 0.14), transparent 46%),
    linear-gradient(180deg, #12100C 0%, var(--bg) 78%);
}

/* The cover carries its own light, so the glow behind it is warm
   sand rather than the fire bloom used on the Flames pages. */
.fossil-hero .kit-hero__cover-glow {
  background: radial-gradient(circle at 50% 45%, rgba(200, 160, 106, 0.30), transparent 62%);
}

.fossil-hero__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fossil-hero__credits a {
  color: var(--fire);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.fossil-hero__credits a:hover {
  color: var(--fire-hover);
  border-bottom-color: currentColor;
}

.fossil-hero__credits span {
  color: var(--text-3);
}

/* ─── Closing CTA ───────────────────────────────────────────── */

.fossil-cta {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200, 160, 106, 0.14), transparent 55%),
    linear-gradient(180deg, #0B0A08 0%, var(--bg) 100%);
}

.fossil-cta__note {
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-2);
}

/* The buy link has no destination until the BeatStars product is
   live. It stays visible so the page reads complete, but it must
   not behave like a working button. */
.btn--disabled {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.4);
}

/* ─── Mobile ────────────────────────────────────────────────── */

/* Three columns get cramped before the phone breakpoint. */
/* ─── Sample browser: sand instead of fire ──────────────────
   kit-page.css paints the finder in hard-coded Flames orange
   (#ff8c00 folders, rgba(255,100,0,…) selection, #e8982a title
   icon) — hard-coded, so the token override at the top of this
   file never reached it. Every one of those is restated here in
   the cover's sand, scoped to .fossil-page so the Flames pages
   keep their fire.
   ─────────────────────────────────────────────────────────── */

/* Folder icons — sidebar and title bar */
.fossil-page .finder__sidebar-folder            { color: #A8814B; }
.fossil-page .finder__sidebar-item:hover .finder__sidebar-folder,
.fossil-page .finder__sidebar-item.is-active .finder__sidebar-folder { color: #D9B47E; }
.fossil-page .finder__title-folder-icon         { color: #C8A06A; }
.fossil-page .finder__sidebar-nopreview .finder__sidebar-folder { color: rgba(168, 129, 75, 0.55); }

/* Selected folder in the sidebar */
.fossil-page .finder__sidebar-item.is-active {
  background: rgba(200, 160, 106, 0.20);
  color: #FFFFFF;
}

/* File rows — selected and playing */
.fossil-page .finder__file.is-selected { background: rgba(200, 160, 106, 0.10); }
.fossil-page .finder__file.is-playing  { background: rgba(200, 160, 106, 0.16); }
.fossil-page .finder__file.is-selected .finder__file-icon,
.fossil-page .finder__file.is-playing .finder__file-icon { color: #D9B47E; }
.fossil-page .finder__file.is-playing .finder__file-wave span {
  background: rgba(217, 180, 126, 0.75);
}

/* --- Direktkauf: dezenter Zweitlink auf BeatStars --- */
.kit-hero__alt {
  display: block;
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.2s ease;
}
.kit-hero__alt:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}