/* ==========================================================================
   Stokvo :: core stylesheet
   Everything shared across pages lives here. Page specific rules go in
   css/<page>.css so this file stays the single source of truth.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --ink: #1d1d1d;
  --orchid: #e5bddf;

  /* Surfaces, darkest to lightest */
  --surface-000: #141414;
  --surface-100: #1d1d1d;
  --surface-200: #222222;
  --surface-300: #282828;
  --surface-400: #303030;
  --surface-500: #3a3a3a;

  /* Text */
  --text-100: #f4f2f3;
  --text-200: #b9b5b7;
  --text-300: #8a8688;
  --text-400: #666264;

  /* Lines */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-orchid: rgba(229, 189, 223, 0.28);

  /* Orchid tints */
  --orchid-08: rgba(229, 189, 223, 0.08);
  --orchid-14: rgba(229, 189, 223, 0.14);
  --orchid-24: rgba(229, 189, 223, 0.24);
  --orchid-40: rgba(229, 189, 223, 0.4);

  /* Status */
  --positive: #8fd4a8;
  --caution: #e8c98a;
  --negative: #e79b95;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Consolas, "Liberation Mono", monospace;

  /* Spacing scale, 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --fast: 120ms var(--ease);
  --base: 200ms var(--ease);
  --slow: 340ms var(--ease);

  /* Layout */
  --container: 1240px;
  --container-narrow: 920px;
  --header-h: 68px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.48);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--ink);
  color: var(--text-100);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
}

::selection {
  background: var(--orchid);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--orchid);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-500) transparent;
}

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

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--surface-400);
  border-radius: var(--r-pill);
  border: 3px solid var(--ink);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--surface-500);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text-100);
}

/* The scale is deliberately flat. Nothing on a marketplace page needs to
   shout, and big display type was the loudest thing about the old design. */
.display {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 560;
}

.h1 {
  font-size: clamp(22px, 2.4vw, 27px);
  letter-spacing: -0.022em;
}

.h2 {
  font-size: 19px;
  letter-spacing: -0.018em;
}

.h3 {
  font-size: 16px;
  letter-spacing: -0.014em;
}

.h4 {
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-200);
}

.body-sm {
  font-size: 13.5px;
  line-height: 1.6;
}

.muted {
  color: var(--text-300);
}

.dim {
  color: var(--text-200);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: normal;
}

.accent {
  color: var(--orchid);
}

.price {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Link with a hairline underline that grows on hover */
.link {
  color: var(--text-100);
  position: relative;
  transition: color var(--fast);
}

.link:hover {
  color: var(--orchid);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-100);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--fast);
}

.link-arrow svg {
  transition: transform var(--base);
}

.link-arrow:hover {
  color: var(--orchid);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--s-12);
}

.section--sm {
  padding-block: var(--s-10);
}

.section--tight {
  padding-block: var(--s-8);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.section-head__text {
  max-width: 560px;
}

.section-head__text .eyebrow {
  display: block;
  margin-bottom: var(--s-3);
}

.section-head__text p {
  margin-top: var(--s-3);
  color: var(--text-300);
  font-size: 14.5px;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-6 { gap: var(--s-6); }
.stack-8 { gap: var(--s-8); }

.row {
  display: flex;
  align-items: center;
}

.row-2 { gap: var(--s-2); }
.row-3 { gap: var(--s-3); }
.row-4 { gap: var(--s-4); }
.row-6 { gap: var(--s-6); }

.row-wrap {
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Hairline rule that fades out at both ends */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-strong) 12%,
    var(--line-strong) 88%,
    transparent
  );
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-h: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--btn-h);
  padding-inline: var(--s-5);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast),
    color var(--fast), transform var(--fast), opacity var(--fast);
  user-select: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex-shrink: 0;
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Primary: orchid fill on jet black text */
.btn--primary {
  background: var(--orchid);
  color: var(--ink);
  font-weight: 560;
}

.btn--primary:hover {
  background: #f0d3ec;
}

/* Secondary: outlined */
.btn--secondary {
  background: var(--surface-200);
  border-color: var(--line-strong);
  color: var(--text-100);
}

.btn--secondary:hover {
  background: var(--surface-300);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Ghost: no chrome until hover */
.btn--ghost {
  background: transparent;
  color: var(--text-200);
}

.btn--ghost:hover {
  background: var(--surface-300);
  color: var(--text-100);
}

/* Outline orchid */
.btn--outline {
  background: transparent;
  border-color: var(--line-orchid);
  color: var(--orchid);
}

.btn--outline:hover {
  background: var(--orchid-08);
  border-color: var(--orchid-40);
}

.btn--danger {
  background: transparent;
  border-color: rgba(231, 155, 149, 0.3);
  color: var(--negative);
}

.btn--danger:hover {
  background: rgba(231, 155, 149, 0.1);
}

.btn--sm {
  --btn-h: 34px;
  padding-inline: var(--s-3);
  font-size: 13px;
  border-radius: var(--r-sm);
}

.btn--lg {
  --btn-h: 50px;
  padding-inline: var(--s-6);
  font-size: 15px;
}

.btn--block {
  width: 100%;
}

.btn--icon {
  padding-inline: 0;
  width: var(--btn-h);
}

/* Square icon button used in toolbars and card corners */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-200);
  color: var(--text-200);
  transition: all var(--fast);
}

.icon-btn:hover {
  background: var(--surface-300);
  border-color: var(--line-strong);
  color: var(--text-100);
}

.icon-btn.is-active {
  color: var(--orchid);
  border-color: var(--line-orchid);
  background: var(--orchid-08);
}

/* --------------------------------------------------------------------------
   6. Tags, badges, pills
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-300);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-200);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tag--orchid {
  background: var(--orchid-08);
  border-color: var(--line-orchid);
  color: var(--orchid);
}

.tag--plain {
  background: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
}

.badge--positive {
  background: rgba(143, 212, 168, 0.12);
  color: var(--positive);
}

.badge--caution {
  background: rgba(232, 201, 138, 0.12);
  color: var(--caution);
}

.badge--negative {
  background: rgba(231, 155, 149, 0.12);
  color: var(--negative);
}

.badge--neutral {
  background: var(--surface-300);
  color: var(--text-300);
}

.badge--orchid {
  background: var(--orchid-14);
  color: var(--orchid);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Filter pill row */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 34px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-200);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-200);
  white-space: nowrap;
  transition: all var(--fast);
  cursor: pointer;
}

.pill:hover {
  border-color: var(--line-strong);
  color: var(--text-100);
}

.pill.is-active {
  background: var(--orchid);
  border-color: var(--orchid);
  color: var(--ink);
  font-weight: 560;
}

/* --------------------------------------------------------------------------
   7. Cards and surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-200);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.card--flat {
  background: transparent;
}

.card--pad {
  padding: var(--s-6);
}

.card--pad-sm {
  padding: var(--s-4);
}

.panel {
  background: var(--surface-200);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.panel__title {
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.panel__body {
  padding: var(--s-5);
}

/* --------------------------------------------------------------------------
   8. Thumbnails
   Every listing thumbnail is CSS generated, no image files needed.
   Set data-motif on .thumb to pick the pattern.
   -------------------------------------------------------------------------- */

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-300);
  isolation: isolate;
}

/* The pattern is only there so a wall of thumbnails is not a wall of identical
   grey boxes. It stays faint enough to read as texture, not as artwork. */
.thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
}

.thumb[data-motif="grid"]::before {
  background-image: linear-gradient(var(--line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}

.thumb[data-motif="dots"]::before {
  background-image: radial-gradient(var(--line-strong) 1.3px, transparent 1.3px);
  background-size: 16px 16px;
}

.thumb[data-motif="lines"]::before {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--line-strong) 0 1px,
    transparent 1px 12px
  );
}

.thumb[data-motif="rings"]::before {
  background-image: repeating-radial-gradient(
    circle at 72% 28%,
    var(--line-strong) 0 1px,
    transparent 1px 24px
  );
}

.thumb[data-motif="arcs"]::before {
  background-image: repeating-linear-gradient(
      90deg,
      var(--line-strong) 0 1px,
      transparent 1px 34px
    ),
    repeating-radial-gradient(
      circle at 20% 90%,
      var(--line-strong) 0 1px,
      transparent 1px 30px
    );
}

.thumb[data-motif="bars"]::before {
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 2px,
    transparent 2px 18px
  );
}

.thumb__label {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  font-size: 11.5px;
  color: var(--text-300);
}

.thumb__corner {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   9. Listing card
   -------------------------------------------------------------------------- */

.listing-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: transparent;
  border-radius: var(--r-lg);
  position: relative;
}

.listing-card__media {
  position: relative;
}

.listing-card__fav {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--text-200);
  opacity: 0;
  transition: all var(--fast);
}

.listing-card:hover .listing-card__fav,
.listing-card__fav.is-active,
.listing-card__fav:focus-visible {
  opacity: 1;
}

.listing-card__fav:hover {
  color: var(--orchid);
  border-color: var(--line-orchid);
}

.listing-card__fav.is-active {
  color: var(--orchid);
}

.listing-card__fav.is-active svg {
  fill: var(--orchid);
}

.listing-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.listing-card__seller {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12.5px;
  color: var(--text-300);
}

.listing-card__title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--text-100);
  transition: color var(--fast);
}

.listing-card:hover .listing-card__title {
  color: var(--orchid);
}

.listing-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  margin-top: var(--s-1);
}

.listing-card__price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-100);
  font-variant-numeric: tabular-nums;
}

.listing-card__price span {
  font-size: 12px;
  color: var(--text-400);
  margin-right: 4px;
}

/* Wide variant used in list view */
.listing-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-200);
  transition: border-color var(--fast), background var(--fast);
}

.listing-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-300);
}

.listing-row .thumb {
  aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   10. Avatar and rating
   -------------------------------------------------------------------------- */

.avatar {
  --av: 28px;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: calc(var(--av) * 0.36);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--surface-400);
  color: var(--text-100);
  border: 1px solid var(--line);
  overflow: hidden;
  text-transform: uppercase;
  position: relative;
}

/* Sits over the initials rather than replacing them, so what shows while the
   image is still coming, or if it never comes, is a finished avatar instead
   of a hole. The onerror on the tag removes it outright if the file is gone. */
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar--orchid {
  background: var(--orchid-14);
  color: var(--orchid);
  border-color: var(--line-orchid);
}

.avatar--sq {
  border-radius: var(--r-sm);
}

.avatar--20 { --av: 20px; }
.avatar--24 { --av: 24px; }
.avatar--32 { --av: 32px; }
.avatar--40 { --av: 40px; }
.avatar--56 { --av: 56px; }
.avatar--72 { --av: 72px; }
.avatar--96 { --av: 96px; }

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar {
  margin-left: calc(var(--av) * -0.32);
  border: 2px solid var(--ink);
}

.avatar-stack .avatar:first-child {
  margin-left: 0;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-200);
}

.rating__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--orchid);
}

.rating__stars svg {
  width: 12px;
  height: 12px;
}

.rating__value {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-100);
}

.rating__count {
  color: var(--text-400);
}

/* Verified tick */
.verified {
  display: inline-flex;
  color: var(--orchid);
  flex-shrink: 0;
}

.verified svg {
  width: 13px;
  height: 13px;
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-100);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.field__label .req {
  color: var(--orchid);
}

.field__hint {
  font-size: 12.5px;
  color: var(--text-400);
  line-height: 1.5;
}

.field__error {
  font-size: 12.5px;
  color: var(--negative);
  display: none;
}

.field.has-error .field__error {
  display: block;
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: rgba(231, 155, 149, 0.45);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--surface-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text-100);
  font-size: 14px;
  padding: 11px var(--s-4);
  transition: border-color var(--fast), background var(--fast),
    box-shadow var(--fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-400);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--orchid-40);
  background: var(--surface-200);
  box-shadow: 0 0 0 3px var(--orchid-08);
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.65;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-10);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a8688' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

.select option {
  background: var(--surface-200);
  color: var(--text-100);
}

/* Input with a leading icon or a trailing suffix */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input {
  padding-left: var(--s-10);
}

.input-group__icon {
  position: absolute;
  left: var(--s-4);
  color: var(--text-400);
  pointer-events: none;
  display: flex;
}

.input-group--suffix .input {
  padding-left: var(--s-4);
  padding-right: 56px;
}

.input-group__suffix {
  position: absolute;
  right: var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-400);
  pointer-events: none;
}

/* Checkbox and radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-200);
  user-select: none;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-100);
  cursor: pointer;
  transition: all var(--fast);
  position: relative;
}

.check input[type="radio"] {
  border-radius: 50%;
}

.check input:hover {
  border-color: var(--orchid-40);
}

.check input:checked {
  background: var(--orchid);
  border-color: var(--orchid);
}

.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid var(--ink);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

.check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ink);
}

.check:hover {
  color: var(--text-100);
}

/* Toggle switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-400);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
  flex-shrink: 0;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-200);
  transition: transform var(--base), background var(--fast);
}

.switch input:checked {
  background: var(--orchid);
  border-color: var(--orchid);
}

.switch input:checked::after {
  transform: translateX(16px);
  background: var(--ink);
}

/* Segmented control */
.segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-200);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.segment button {
  height: 30px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-300);
  transition: all var(--fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.segment button:hover {
  color: var(--text-100);
}

.segment button.is-active {
  background: var(--surface-400);
  color: var(--text-100);
}

/* Search field in the header and on browse */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search__icon {
  position: absolute;
  left: var(--s-4);
  color: var(--text-400);
  display: flex;
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 40px;
  background: var(--surface-200);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding-left: 40px;
  padding-right: var(--s-12);
  font-size: 13.5px;
  color: var(--text-100);
  transition: all var(--fast);
}

.search__input::placeholder {
  color: var(--text-400);
}

.search__input:hover {
  border-color: var(--line-strong);
}

.search__input:focus {
  outline: none;
  border-color: var(--orchid-40);
  background: var(--surface-100);
  box-shadow: 0 0 0 3px var(--orchid-08);
}

.search__kbd {
  position: absolute;
  right: var(--s-3);
  pointer-events: none;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-400);
  background: var(--surface-300);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   12. Tabs, breadcrumbs, pagination
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--s-6);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs button,
.tabs a {
  position: relative;
  padding-block: var(--s-3);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-300);
  white-space: nowrap;
  transition: color var(--fast);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.tabs button::after,
.tabs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--orchid);
  transform: scaleX(0);
  transition: transform var(--base);
}

.tabs button:hover,
.tabs a:hover {
  color: var(--text-100);
}

.tabs button.is-active,
.tabs a.is-active {
  color: var(--text-100);
}

.tabs button.is-active::after,
.tabs a.is-active::after {
  transform: scaleX(1);
}

.tabs .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-400);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12.5px;
  color: var(--text-400);
  flex-wrap: wrap;
}

.breadcrumb a:hover {
  color: var(--orchid);
}

.breadcrumb .sep {
  color: var(--text-400);
  opacity: 0.6;
}

.breadcrumb .current {
  color: var(--text-200);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.pagination button,
.pagination a {
  min-width: 36px;
  height: 36px;
  padding-inline: var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-300);
  transition: all var(--fast);
}

.pagination button:hover,
.pagination a:hover {
  background: var(--surface-300);
  color: var(--text-100);
}

.pagination .is-active {
  background: var(--surface-300);
  border-color: var(--line-strong);
  color: var(--text-100);
}

.pagination .is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   13. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  /* Without this, an absolutely positioned descendant such as .sr-only resolves
     against the viewport, escapes the scroller and widens the whole document. */
  position: relative;
}

.table {
  min-width: 640px;
}

.table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-400);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-200);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--fast);
}

.table tbody tr:hover {
  background: var(--surface-300);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-100);
}

.table .right {
  text-align: right;
}

/* --------------------------------------------------------------------------
   14. Stats
   -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.stat__label {
  font-size: 12.5px;
  color: var(--text-400);
}

.stat__value {
  font-size: 26px;
  font-weight: 560;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.stat__delta.up {
  color: var(--positive);
}

.stat__delta.down {
  color: var(--negative);
}

/* --------------------------------------------------------------------------
   15. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(29, 29, 29, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* The mark is taller than it is wide, so height is what is fixed and width
   follows. Setting both, as a square icon could get away with, would squash
   it. currentColor paints the upper half, which is why the colour is the page
   text rather than the accent: the lower half carries the orchid on its own,
   and two accent halves would be a solid blob. */
.logo__mark {
  height: 24px;
  width: auto;
  color: var(--text-100);
}

.logo__word {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-100);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.header__nav a {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-300);
  transition: all var(--fast);
  white-space: nowrap;
}

.header__nav a:hover {
  color: var(--text-100);
  background: var(--surface-300);
}

.header__nav a.is-active {
  color: var(--text-100);
}

.header__search {
  flex: 1;
  max-width: 380px;
  margin-inline: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  flex-shrink: 0;
}

.header__burger {
  display: none;
}

/* Saved listings link, plain text with a count rather than a badged icon */
.header__saved {
  font-size: 13.5px;
  color: var(--text-300);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: color var(--fast);
  white-space: nowrap;
}

.header__saved:hover {
  color: var(--text-100);
}

/* Sits after the account button and reads like Saved does. Quiet on purpose:
   it has to be reachable without being the thing the eye lands on. */
.header__signout {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-400);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: color var(--fast);
  white-space: nowrap;
  cursor: pointer;
}

.header__signout:hover {
  color: var(--text-100);
}

/* Below the mobile breakpoint the header collapses to the logo, the account
   button and the burger. Signing out lives in the drawer there, where there
   is room for it to be a full row. */
@media (max-width: 900px) {
  .header__signout {
    display: none;
  }
}

.fav-count {
  font-variant-numeric: tabular-nums;
  color: var(--orchid);
}

.fav-count::before {
  content: "(";
}

.fav-count::after {
  content: ")";
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
  transition: opacity var(--base);
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--surface-100);
  border-left: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transform: translateX(100%);
  transition: transform var(--slow);
  overflow-y: auto;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.drawer__nav a {
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-200);
  transition: all var(--fast);
}

.drawer__nav a:hover,
.drawer__nav a.is-active {
  background: var(--surface-300);
  color: var(--text-100);
}

/* Signing out sits under the primary button, quiet on purpose. It is not a
   thing to encourage, just a thing that has to be reachable. */
.drawer__signout {
  align-self: flex-start;
  margin-top: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 14px;
  color: var(--text-300);
}

.drawer__signout:hover {
  color: var(--text-100);
}

/* --------------------------------------------------------------------------
   15a. Gate
   -------------------------------------------------------------------------- */

/* Shown instead of a page that needs a signed-in seller. Deliberately plain:
   it is a door, not a landing page. */

.gate {
  max-width: 440px;
  margin: 0 auto;
  padding-block: var(--s-24) var(--s-32);
  text-align: center;
}

.gate__title {
  margin-bottom: var(--s-3);
}

.gate__body {
  color: var(--text-300);
  text-wrap: balance;
}

.gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

@media (max-width: 640px) {
  .gate {
    padding-block: var(--s-16) var(--s-20);
  }
}

/* --------------------------------------------------------------------------
   15b. Loading
   -------------------------------------------------------------------------- */

/* Every page builds itself from one request, so there is a moment before the
   first paint where the markup is an empty shell. This covers that moment.

   It is not an animation for its own sake. The rule in this codebase is that
   a thing on screen has to carry information the reader could not infer, and
   "the page is still coming" is exactly that. So: the mark, and a line that
   moves. No spinner, no bounce, nothing that draws the eye once the content
   arrives. */

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: var(--s-5);
  background: var(--ink);
  opacity: 1;
  transition: opacity var(--base);
}

.boot.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

/* Height fixed, width follows, same as the header mark. */
.boot__mark {
  height: 40px;
  width: auto;
  color: var(--text-100);
}

/* A track that fills and resets. Indeterminate on purpose: the page has no
   honest percentage to report, and inventing one would be a lie told in
   pixels. */
.boot__bar {
  position: relative;
  width: 120px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-300);
}

.boot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: var(--orchid);
  animation: boot-slide 1.1s var(--ease) infinite;
}

@keyframes boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Said out loud only when it has been slow enough to be worth explaining. */
.boot__note {
  min-height: 1.2em;
  font-size: 13px;
  color: var(--text-300);
  opacity: 0;
  transition: opacity var(--base);
}

.boot__note.is-shown {
  opacity: 1;
}

/* Someone who has asked for less movement gets a still bar rather than none:
   the page is still loading and still has to say so. */
@media (prefers-reduced-motion: reduce) {
  .boot__bar::after {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
  .boot { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-8);
  margin-top: var(--s-12);
}

/* One row. A five column link farm was doing nothing for anyone. */
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-400);
}

.footer__links {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.footer__links a {
  color: var(--text-300);
  transition: color var(--fast);
}

.footer__links a:hover {
  color: var(--text-100);
}

/* --------------------------------------------------------------------------
   17. Misc components
   -------------------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-20) var(--s-6);
}

.empty__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-200);
  color: var(--text-400);
  margin-bottom: var(--s-2);
}

.empty p {
  font-size: 13.5px;
  color: var(--text-400);
  max-width: 340px;
}

/* Progress bar */
.bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-400);
  overflow: hidden;
}

.bar__fill {
  /* Needed so the fill still works when it is written as a span, which stays
     inline by default and would ignore both the width and the height. */
  display: block;
  height: 100%;
  background: var(--orchid);
  border-radius: var(--r-pill);
  transition: width var(--slow);
}

/* Toast */
/* A quiet line of text in the corner. Most actions confirm themselves by
   changing the control you just pressed, so this is only for the ones that
   leave nothing visible behind. */
.toast-host {
  position: fixed;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
  pointer-events: none;
}

.toast {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-300);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-200);
  max-width: min(320px, calc(100vw - var(--s-10)));
}

/* .reveal is kept as an inert hook so any page still using the class renders
   normally. There are no scroll animations in this design. */
.reveal,
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Sticky aside used on listing and browse pages */
.sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
}

/* Skeleton shimmer for loading states */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-300) 25%,
    var(--surface-400) 37%,
    var(--surface-300) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* Accessible visually hidden text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 400;
  background: var(--orchid);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 560;
  transition: transform var(--base);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.hide { display: none !important; }
.tc { text-align: center; }
.tr { text-align: right; }
.w-full { width: 100%; }
.relative { position: relative; }
.nowrap { white-space: nowrap; }

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }
.mt-12 { margin-top: var(--s-12); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.mb-10 { margin-bottom: var(--s-10); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: var(--s-10);
  }
  .footer__brand {
    grid-column: 1 / -1;
    max-width: 420px;
  }
  .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 60px;
  }
  /* Search stays. It is the main thing anyone opens this on a phone to do.
     The links move behind the burger. */
  .header__nav,
  .header__saved,
  .header__actions .btn {
    display: none;
  }
  .header__search {
    max-width: none;
    margin-left: auto;
  }
  .header__burger {
    display: inline-flex;
  }
  .section {
    padding-block: var(--s-16);
  }
  .section--sm {
    padding-block: var(--s-12);
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .listing-row {
    grid-template-columns: 150px 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14.5px;
  }
  .container {
    padding-inline: var(--s-4);
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer {
    margin-top: var(--s-16);
    padding-block: var(--s-12) var(--s-6);
  }
  .section-head {
    align-items: flex-start;
  }
  .listing-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat__value {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   15c. Not open yet
   -------------------------------------------------------------------------- */

/* A part of the product that exists but is switched off. Reads as a decision
   rather than as a gap: the tag says it is coming, the sentence says why it
   is not here, and there is nothing to click that does not work. */

.soon {
  max-width: 460px;
  margin: 0 auto;
  padding-block: var(--s-20) var(--s-24);
  text-align: center;
}

/* Inside a panel rather than on a page of its own, the spacing has to be
   smaller or the panel grows around one sentence. */
.panel .soon,
.dash-panel .soon,
.adm-panel .soon {
  padding-block: var(--s-10);
}

.soon__tag {
  display: inline-block;
  margin-bottom: var(--s-4);
  padding: 3px var(--s-3);
  border: 1px solid var(--line-orchid);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--orchid);
}

.soon__title {
  margin-bottom: var(--s-3);
}

.soon__body {
  color: var(--text-300);
  text-wrap: balance;
}

.soon__link {
  display: inline-block;
  margin-top: var(--s-6);
  font-size: 14px;
}

@media (max-width: 640px) {
  .soon {
    padding-block: var(--s-12) var(--s-16);
  }
}