/*
 * Archievable — editorial restyle on top of the Main theme.
 * Palette/font come from theme settings (accent #fafafa, bg #0a0a0a,
 * card #0d0d10, text #fafafa, font Geist).
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

/* Lock the archievable palette regardless of dashboard settings (kills the
   default blue accent). These override the theme's injected variables. */
:root {
  --cl-accent: 250, 250, 250 !important;
  --cl-background: 10, 10, 10 !important;
  --cl-card: 13, 13, 16 !important;
  --cl-t-primary: 250, 250, 250 !important;
  --cl-t-accent: 10, 10, 10 !important;
}

body {
  background-color: rgb(10, 10, 10) !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
}

[x-text],
.line-through,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Product / category cards: softer radius + editorial hover */
a.bg-card {
  border-radius: 14px !important;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
}

.component a.bg-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-2px);
}

/* Section rhythm */
.components > .component + .component {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.component h2 {
  margin-bottom: 1.5rem;
}

/* Currency selector — readable dropdown (the forced palette otherwise makes
   the hovered row white-on-white) and a quieter trigger */
.currency-selector .choices__inner {
  min-height: 34px !important;
  height: 34px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.currency-selector .choices__list--dropdown,
.currency-selector .choices__list[aria-expanded] {
  background: #0e0e11 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.currency-selector .choices__list--dropdown .choices__item,
.currency-selector .choices__list[aria-expanded] .choices__item {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.currency-selector .choices__list--dropdown .choices__item--selectable.is-highlighted,
.currency-selector .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Thin, neutral scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
}