/* ════════════════════════════════════════════════════════════════════
   BPM v29 · HERO FIX — Turtle Oracle button system + announcement bar
   Loads LAST in theme.liquid, so it wins every cascade tie.
   Namespaced .to-* — nothing else in the theme targets these classes,
   so there is no !important war here. The few !importants below are
   defensive armor against the theme's existing broad !important rules.
   Palette locked: void black · deep purple · silver · dark rose ·
   hot pink · full moon white. No gold. Ever.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --to-ink:    #08080A;
  --to-purple: #2B1B3D;
  --to-rose:   #6E2E45;
  --to-pink:   #FF3D82;
  --to-silver: #C4C0C9;
  --to-ash:    #8A858F;
  --to-moon:   #F2EFE9;
}

/* ── The pair · one geometry, two weights ──────────────────────────── */
.to-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:52px;
  padding:0 28px !important;
  border:1px solid transparent;
  border-radius:2px !important;
  background-color:transparent;
  font-family:"Bebas Neue", Impact, sans-serif !important;
  font-size:15px !important;
  line-height:1;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform .18s ease, background-color .25s ease,
             border-color .25s ease, color .25s ease;
}

/* Primary — the seal. Hover presses it 1px into the wax. */
.to-btn--seal{
  background-color:var(--to-purple) !important;
  border-color:var(--to-silver) !important;
  color:var(--to-moon) !important;
  box-shadow:inset 0 0 0 1px rgba(8,8,10,.55), 0 4px 22px rgba(0,0,0,.45);
}
.to-btn--seal:hover,
.to-btn--seal:focus-visible{
  background-color:var(--to-rose) !important;
  border-color:var(--to-pink) !important;
  color:var(--to-moon) !important;
  transform:translateY(1px);
}
.to-btn__mark{ color:var(--to-pink); font-size:.85em; }
.to-btn--seal:hover .to-btn__mark{ color:var(--to-moon); }

/* Secondary — the ghost. Same geometry, hairline only. */
.to-btn--ghost{
  border-color:rgba(196,192,201,.40) !important;
  color:var(--to-silver) !important;
  background-color:transparent !important;
}
.to-btn--ghost:hover,
.to-btn--ghost:focus-visible{
  background-color:rgba(43,27,61,.55) !important;
  border-color:var(--to-moon) !important;
  color:var(--to-moon) !important;
}
.to-btn__arrow{ display:inline-block; transition:transform .22s ease; }
.to-btn--ghost:hover .to-btn__arrow{ transform:translateY(3px); }

.to-btn:focus-visible{ outline:2px solid var(--to-moon); outline-offset:3px; }

@media (max-width:749px){
  .to-btn{ width:100%; }
}

/* ── Trust badge marks (replaces emoji — emoji can't be themed) ────── */
.to-trust__mark{ color:var(--to-silver); margin-right:.35em; }

/* ── Announcement bar ──────────────────────────────────────────────── */
.to-announce{
  display:block;
  background-color:var(--to-ink) !important;
  border-bottom:1px solid rgba(196,192,201,.18);
  color:var(--to-silver) !important;
  padding:10px 16px !important;
  text-align:center;
  text-decoration:none !important;
  transition:color .25s ease;
}
.to-announce:hover{ color:var(--to-moon) !important; }
.to-announce__inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:11px;
  font-family:"Bebas Neue", Impact, sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.to-announce__star{ color:var(--to-pink); }
.to-announce__code{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:none;
  color:var(--to-pink);
  border:1px solid rgba(196,192,201,.32);
  border-radius:2px;
  padding:4px 10px;
  white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .to-btn,.to-btn__arrow,.to-announce{ transition:none; }
  .to-btn--seal:hover{ transform:none; }
  .to-btn--ghost:hover .to-btn__arrow{ transform:none; }
}
