/* ============================================================================
   NEBULA MARKET — "DEEP FIELD" DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Core tokens, reset, typography, layout primitives, controls, shell.
   Page-level compositions live in nebula-ui.css.

   Identity model: the interface is an *observation instrument* trained on a
   nebula. Chrome reads as machined hardware (thin rules, mono telemetry,
   coordinate rails); content reads as the luminous field being observed.
   The signature shape is the APERTURE (ellipse/circle), not the rounded box.
   Ember red is a pointer, never a surface.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* ---- Space blacks: 6 graded depths, none of them pure #000 ---- */
  --nb-void: #04050a;
  --nb-abyss: #070912;
  --nb-deep: #0b0e1a;
  --nb-carbon: #11141f;
  --nb-slate: #191d2b;
  --nb-mineral: #252a3a;

  /* ---- Mineral greys → cold whites ---- */
  --nb-ash: #3a4155;
  --nb-dust: #6b7288;
  --nb-mist: #9aa1b5;
  --nb-frost: #dde2ee;
  --nb-white: #f4f6fb;

  /* ---- Ember: the single accent. Pointer, not paint. ---- */
  --nb-ember: #ff4438;
  --nb-ember-hot: #ff6a52;
  --nb-ember-deep: #b81c12;
  --nb-ember-rgb: 255, 68, 56;

  /* ---- Atmospheric tints. Depth only — never a UI colour. ---- */
  --nb-violet: #2e1f5e;
  --nb-indigo: #14224e;
  --nb-cyan: #0e3340;

  /* ---- Translucent surfaces: 3 defined planes, not ad-hoc glass ---- */
  --nb-surface-1: rgba(255, 255, 255, 0.022);
  --nb-surface-2: rgba(255, 255, 255, 0.042);
  --nb-surface-3: rgba(255, 255, 255, 0.07);
  --nb-line: rgba(255, 255, 255, 0.08);
  --nb-line-soft: rgba(255, 255, 255, 0.045);
  --nb-line-hard: rgba(255, 255, 255, 0.16);

  /* ---- Type ---- */
  --nb-font-display: 'Bricolage Grotesque', 'Syne', system-ui, sans-serif;
  --nb-font-ui: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --nb-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --nb-fs-display-xl: clamp(3rem, 10.5vw, 9.5rem);
  --nb-fs-display: clamp(2.4rem, 6.4vw, 5.5rem);
  --nb-fs-h1: clamp(2rem, 4.4vw, 3.4rem);
  --nb-fs-h2: clamp(1.6rem, 3vw, 2.5rem);
  --nb-fs-h3: clamp(1.15rem, 1.9vw, 1.5rem);
  --nb-fs-body: clamp(0.95rem, 0.4vw + 0.85rem, 1.06rem);
  --nb-fs-sm: 0.875rem;
  --nb-fs-xs: 0.78rem;
  --nb-fs-mono: 0.7rem;

  /* ---- Space: 4px base, geometric-ish ---- */
  --nb-s1: 0.25rem;
  --nb-s2: 0.5rem;
  --nb-s3: 0.75rem;
  --nb-s4: 1rem;
  --nb-s5: 1.5rem;
  --nb-s6: 2rem;
  --nb-s7: 3rem;
  --nb-s8: 4rem;
  --nb-s9: 6rem;
  --nb-s10: 8rem;
  --nb-section: clamp(4rem, 9vw, 8.5rem);

  /* ---- Radii: mostly tight. Roundness is reserved for apertures. ---- */
  --nb-r-xs: 3px;
  --nb-r-sm: 6px;
  --nb-r-md: 10px;
  --nb-r-lg: 16px;
  --nb-r-pill: 999px;

  /* ---- Elevation: light comes from the field, so shadows are deep + cool -- */
  --nb-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nb-e2: 0 8px 24px -8px rgba(0, 0, 0, 0.65);
  --nb-e3: 0 24px 60px -18px rgba(0, 0, 0, 0.8);
  --nb-e-ember: 0 10px 40px -12px rgba(var(--nb-ember-rgb), 0.45);

  /* ---- Motion: orbital easings. Weight and inertia, never linear. ---- */
  --nb-ease-orbit: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nb-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --nb-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --nb-ease-mass: cubic-bezier(0.34, 1.32, 0.44, 1);

  --nb-t-micro: 170ms;
  --nb-t-fast: 320ms;
  --nb-t-base: 560ms;
  --nb-t-slow: 900ms;

  /* ---- Layout ---- */
  --nb-max: 1440px;
  --nb-gutter: clamp(1.15rem, 4vw, 4rem);
  --nb-nav-h: 68px;

  /* Bridge to the Tailwind build (built.css maps these) so functional
     components inherited from the base theme stay on-palette. */
  --cl-accent: var(--nb-ember-rgb);
  --cl-background: 4, 5, 10;
  --cl-t-primary: 244, 246, 251;
  --cl-t-accent: 255, 255, 255;
}

/* ------------------------------------------------------------- 2. RESET/BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The base theme sets scroll-smooth on <html>; kill it for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--nb-void);
  color: var(--nb-frost);
  font-family: var(--nb-font-ui);
  font-size: var(--nb-fs-body);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* Horizontal overflow is the #1 mobile bug in this kind of layout.
   Clip at the root and let individual rails opt into their own scroll. */
html,
body {
  max-width: 100%;
}

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

/* height:auto matters as much as max-width here: without it an <img> with a
   width attribute keeps its intrinsic height while the width shrinks, which is
   how an unstyled gallery turns into a multi-thousand-pixel column. */
img {
  height: auto;
}

/* Safety net for any component this theme has not restyled (a shop can enable
   component types from the base theme at any time). Without the original
   stylesheet those blocks have no layout, so cap their media and keep any
   marquee/row primitive from stacking into an infinite column. */
[class*='nf-'] img {
  max-height: 320px;
  object-fit: contain;
}

[class*='nf-'][class*='__row'],
[class*='nf-'][class*='__marquee'],
[class*='nf-'][class*='__grid'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-s4);
  max-height: 80vh;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--nb-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--nb-white);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: rgba(var(--nb-ember-rgb), 0.28);
  color: var(--nb-white);
}

/* ---- Focus: never removed. Replaced with an ember aperture ring. ---- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--nb-ember);
  outline-offset: 3px;
  border-radius: var(--nb-r-sm);
}

.nb-skip {
  position: absolute;
  left: var(--nb-s4);
  top: -100px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--nb-ember);
  color: #fff;
  font-weight: 650;
  font-size: var(--nb-fs-sm);
  border-radius: var(--nb-r-sm);
  transition: top var(--nb-t-fast) var(--nb-ease-enter);
}

.nb-skip:focus-visible {
  top: var(--nb-s4);
}

.nb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom scrollbar — reads as instrument hardware. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--nb-mineral) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
  background: var(--nb-mineral);
  border-radius: 99px;
  border: 2px solid var(--nb-void);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--nb-ash);
}

/* ------------------------------------------------------- 3. THE FIELD (BG) */
/* A structured volumetric cloud, not scattered particles. Three fixed
   layers at different depths drift at different rates — parallax without
   a scroll listener, so it costs nothing on the main thread. */

.nb-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(46, 31, 94, 0.5), transparent 60%),
    radial-gradient(90% 70% at 8% 8%, rgba(20, 34, 78, 0.42), transparent 62%),
    radial-gradient(120% 100% at 50% 115%, rgba(184, 28, 18, 0.14), transparent 58%),
    var(--nb-void);
}

.nb-field__cloud {
  position: absolute;
  inset: -25%;
  opacity: 0.5;
  mix-blend-mode: screen;
  background:
    radial-gradient(38% 28% at 22% 32%, rgba(90, 60, 170, 0.5), transparent 70%),
    radial-gradient(30% 24% at 74% 24%, rgba(30, 70, 150, 0.42), transparent 72%),
    radial-gradient(34% 26% at 60% 78%, rgba(180, 40, 30, 0.24), transparent 74%);
  filter: blur(38px);
  animation: nb-drift 46s var(--nb-ease-orbit) infinite alternate;
  will-change: transform;
}

.nb-field__cloud--far {
  inset: -40%;
  opacity: 0.32;
  filter: blur(64px);
  animation-duration: 74s;
  animation-direction: alternate-reverse;
}

/* A faint machined grid — the instrument's reticle over the field. */
.nb-field__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: clamp(64px, 7vw, 108px) clamp(64px, 7vw, 108px);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* Film grain kills banding across the big dark gradients. */
.nb-field__grain {
  position: absolute;
  inset: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes nb-drift {
  0% {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(3%, 2.5%, 0) scale(1.13);
  }
}

/* ------------------------------------------------------------- 4. LAYOUT */

.nb-shell {
  width: 100%;
  max-width: var(--nb-max);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
}

.nb-shell--wide {
  max-width: 1680px;
}

.nb-shell--narrow {
  max-width: 880px;
}

.nb-section {
  position: relative;
  padding-block: var(--nb-section);
}

/* The asymmetric editorial grid. Content deliberately sits off-axis;
   the empty column is the composition, not wasted space. */
.nb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--nb-s5);
}

/* ---- Coordinate rail: the recurring editorial signature ---- */
/* Thin mono telemetry pinned to a section's margin. Gives every section an
   identity marker without another decorative line. */
.nb-rail {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nb-dust);
}

.nb-rail::before {
  content: '';
  width: clamp(18px, 3vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nb-ash));
  flex: none;
}

.nb-rail__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nb-ember);
  box-shadow: 0 0 10px 1px rgba(var(--nb-ember-rgb), 0.7);
  flex: none;
}

.nb-rail__index {
  color: var(--nb-mist);
}

/* Vertical rail for wide screens — sits in the negative column. */
.nb-rail--vertical {
  position: absolute;
  left: 0;
  top: var(--nb-section);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.34em;
}

@media (max-width: 1279px) {
  .nb-rail--vertical {
    display: none;
  }
}

/* ---------------------------------------------------------- 5. TYPOGRAPHY */

.nb-display {
  font-family: var(--nb-font-display);
  font-size: var(--nb-fs-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.nb-display--xl {
  font-size: var(--nb-fs-display-xl);
  line-height: 0.86;
  letter-spacing: -0.05em;
}

.nb-h2 {
  font-size: var(--nb-fs-h2);
  font-weight: 750;
}

.nb-h3 {
  font-size: var(--nb-fs-h3);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.nb-lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--nb-mist);
  max-width: 54ch;
}

.nb-body {
  color: var(--nb-mist);
}

.nb-mono {
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nb-dust);
}

/* Outlined display type — used sparingly for the "cropped/offset" headlines
   the composition calls for. */
.nb-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--nb-ash);
}

/* Ember gradient reserved for ONE word per headline maximum. */
.nb-ink-ember {
  background: linear-gradient(96deg, var(--nb-ember-hot), var(--nb-ember) 46%, var(--nb-ember-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Numeric/telemetry data — prices, stock, counts. Tabular so columns align. */
.nb-num {
  font-family: var(--nb-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ 6. CONTROLS */

.nb-btn {
  --btn-bg: var(--nb-surface-2);
  --btn-fg: var(--nb-white);
  --btn-line: var(--nb-line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  min-height: 46px;
  font-family: var(--nb-font-ui);
  font-size: var(--nb-fs-sm);
  font-weight: 620;
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--nb-r-pill);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    background var(--nb-t-fast) var(--nb-ease-orbit),
    border-color var(--nb-t-fast) var(--nb-ease-orbit),
    color var(--nb-t-fast) var(--nb-ease-orbit),
    transform var(--nb-t-fast) var(--nb-ease-mass);
  -webkit-tap-highlight-color: transparent;
}

.nb-btn:disabled,
.nb-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.nb-btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Primary = ember. The only large ember surface in the system. */
.nb-btn--primary {
  --btn-bg: linear-gradient(180deg, var(--nb-ember-hot), var(--nb-ember) 52%, var(--nb-ember-deep));
  --btn-fg: #fff;
  --btn-line: rgba(255, 255, 255, 0.2);
  box-shadow: var(--nb-e-ember);
  font-weight: 680;
}

/* The "light sweep": a beam crosses the button on hover. This is the
   system's reveal metaphor at micro scale — light exposing a surface. */
.nb-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--nb-t-slow) var(--nb-ease-orbit);
}

.nb-btn--primary:hover::after,
.nb-btn--primary:focus-visible::after {
  transform: translateX(120%);
}

.nb-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 46px -12px rgba(var(--nb-ember-rgb), 0.6);
}

.nb-btn--ghost {
  --btn-bg: transparent;
  --btn-line: var(--nb-line-hard);
  --btn-fg: var(--nb-frost);
}

.nb-btn--ghost:hover {
  --btn-bg: var(--nb-surface-2);
  --btn-fg: var(--nb-white);
  transform: translateY(-2px);
}

.nb-btn--quiet {
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--nb-mist);
  padding-inline: 0.75em;
}

.nb-btn--quiet:hover {
  --btn-fg: var(--nb-white);
}

.nb-btn--sm {
  padding: 0.6em 1.05em;
  min-height: 38px;
  font-size: var(--nb-fs-xs);
}

.nb-btn--lg {
  padding: 1.05em 2rem;
  min-height: 56px;
  font-size: 1rem;
}

.nb-btn--block {
  display: flex;
  width: 100%;
}

.nb-btn:active {
  transform: translateY(0) scale(0.985);
}

/* ---- Chips: filters, categories, sort ---- */
.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em;
  min-height: 36px;
  font-size: var(--nb-fs-xs);
  font-weight: 560;
  color: var(--nb-mist);
  background: var(--nb-surface-1);
  border: 1px solid var(--nb-line-soft);
  border-radius: var(--nb-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--nb-t-micro) var(--nb-ease-orbit),
    background var(--nb-t-micro) var(--nb-ease-orbit),
    border-color var(--nb-t-micro) var(--nb-ease-orbit),
    transform var(--nb-t-micro) var(--nb-ease-mass);
}

.nb-chip:hover {
  color: var(--nb-white);
  background: var(--nb-surface-2);
  border-color: var(--nb-line-hard);
  transform: translateY(-1px);
}

.nb-chip.is-active {
  color: var(--nb-white);
  background: rgba(var(--nb-ember-rgb), 0.13);
  border-color: rgba(var(--nb-ember-rgb), 0.5);
}

.nb-chip.is-active::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nb-ember);
  box-shadow: 0 0 8px rgba(var(--nb-ember-rgb), 0.9);
}

/* ---- Inputs ---- */
.nb-input,
.nb-select,
.nb-textarea {
  width: 100%;
  padding: 0.8em 1em;
  min-height: 46px;
  font: inherit;
  font-size: var(--nb-fs-sm);
  color: var(--nb-white);
  background: var(--nb-surface-1);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-md);
  transition:
    border-color var(--nb-t-micro) var(--nb-ease-orbit),
    background var(--nb-t-micro) var(--nb-ease-orbit),
    box-shadow var(--nb-t-micro) var(--nb-ease-orbit);
}

.nb-input::placeholder,
.nb-textarea::placeholder {
  color: var(--nb-dust);
}

.nb-input:hover,
.nb-select:hover,
.nb-textarea:hover {
  border-color: var(--nb-line-hard);
}

.nb-input:focus,
.nb-select:focus,
.nb-textarea:focus {
  outline: none;
  background: var(--nb-surface-2);
  border-color: rgba(var(--nb-ember-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--nb-ember-rgb), 0.14);
}

.nb-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nb-dust);
}

.nb-field-error {
  margin-top: 0.4rem;
  font-size: var(--nb-fs-xs);
  color: var(--nb-ember-hot);
}

/* ---------------------------------------------------- 7. SURFACES / PANELS */

.nb-panel {
  position: relative;
  background: linear-gradient(180deg, var(--nb-surface-2), var(--nb-surface-1));
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.nb-panel--flat {
  background: var(--nb-carbon);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hairline corner ticks — machined-instrument detail, cheaper and more
   distinctive than a glow border on every element. */
.nb-ticked {
  position: relative;
}

.nb-ticked::before,
.nb-ticked::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--nb-line-hard);
  pointer-events: none;
}

.nb-ticked::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.nb-ticked::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---- Status pips ---- */
.nb-pip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nb-pip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.nb-pip--live {
  color: #3ddc84;
}

.nb-pip--live::before {
  box-shadow: 0 0 8px currentColor;
  animation: nb-pulse 2.4s var(--nb-ease-orbit) infinite;
}

.nb-pip--low {
  color: #ffb020;
}

.nb-pip--out {
  color: var(--nb-dust);
}

@keyframes nb-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

/* -------------------------------------------------------- 8. MOTION BASE */
/* One reveal primitive with directional variants — NOT a fade on everything.
   Elements arrive with mass: they settle, they don't slide uniformly. */

.nb-reveal-ready [data-nb-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

.nb-reveal-ready [data-nb-reveal='rise'] {
  transform: translate3d(0, 26px, 0);
}

.nb-reveal-ready [data-nb-reveal='converge'] {
  transform: translate3d(0, 0, 0) scale(1.06);
  filter: blur(6px);
}

.nb-reveal-ready [data-nb-reveal='separate'] {
  transform: translate3d(-24px, 0, 0);
}

.nb-reveal-ready [data-nb-reveal='separate-r'] {
  transform: translate3d(24px, 0, 0);
}

/* Below the tablet breakpoint the horizontal variants move full-width blocks
   sideways, and that pre-reveal offset is itself enough to push the document
   wider than the viewport (a 24px phantom scroll before anything animates).
   Narrow screens get the vertical arrival instead — same choreography, no
   horizontal overflow. */
@media (max-width: 1023px) {
  .nb-reveal-ready [data-nb-reveal='separate'],
  .nb-reveal-ready [data-nb-reveal='separate-r'] {
    transform: translate3d(0, 22px, 0);
  }
}

[data-nb-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--nb-t-base) var(--nb-ease-enter),
    transform var(--nb-t-base) var(--nb-ease-enter),
    filter var(--nb-t-base) var(--nb-ease-enter);
}

/* Aperture wipe — the signature reveal. Light opens an ellipse over content. */
.nb-reveal-ready [data-nb-reveal='aperture'] {
  opacity: 1;
  clip-path: ellipse(0% 0% at 50% 50%);
}

[data-nb-reveal='aperture'].is-in {
  clip-path: ellipse(140% 140% at 50% 50%);
  transition: clip-path var(--nb-t-slow) var(--nb-ease-enter);
}

/* Pause decorative animation off-screen and in hidden tabs. */
.nb-offscreen *,
.nb-tab-hidden * {
  animation-play-state: paused !important;
}

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

  [data-nb-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .nb-field__cloud {
    animation: none;
  }
}

/* -------------------------------------------------- 9. PAGE TRANSITION */
/* An aperture of light closes over the page, then opens on the next.
   Fast (≈520ms total) — personality without feeling slow. */

.nb-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 60% at var(--nb-tx, 50%) var(--nb-ty, 50%), rgba(var(--nb-ember-rgb), 0.22), transparent 70%),
    var(--nb-void);
  clip-path: circle(0% at var(--nb-tx, 50%) var(--nb-ty, 50%));
}

.nb-transition.is-closing {
  opacity: 1;
  clip-path: circle(150% at var(--nb-tx, 50%) var(--nb-ty, 50%));
  transition:
    clip-path 380ms var(--nb-ease-exit),
    opacity 60ms linear;
}

.nb-transition.is-opening {
  opacity: 1;
  clip-path: circle(0% at var(--nb-tx, 50%) var(--nb-ty, 50%));
  transition:
    clip-path 420ms var(--nb-ease-enter),
    opacity 120ms linear 340ms;
  opacity: 0;
}

/* Scroll progress — a thin ember meridian, top of viewport. */
.nb-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--nb-progress, 0));
  background: linear-gradient(90deg, var(--nb-ember-deep), var(--nb-ember), var(--nb-ember-hot));
  z-index: 60;
  pointer-events: none;
}

/* ------------------------------------------------------------ 10. NAVBAR */

.nb-nav-wrap {
  position: relative;
  z-index: 50;
}

.nb-nav {
  display: flex;
  align-items: center;
  gap: var(--nb-s5);
  height: var(--nb-nav-h);
  max-width: var(--nb-max);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
}

/* The bar itself is a floating instrument panel, inset from the edges. */
.nb-nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.88), rgba(4, 5, 10, 0.62));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--nb-line-soft);
}

.nb-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-family: var(--nb-font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nb-white);
}

/* Brand aperture mark — a nebula ring, drawn in CSS. No image needed. */
.nb-nav__mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, var(--nb-ember-hot), transparent 52%),
    radial-gradient(circle at 68% 70%, var(--nb-violet), transparent 58%),
    var(--nb-abyss);
  border: 1px solid var(--nb-line-hard);
  overflow: hidden;
}

.nb-nav__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(var(--nb-ember-rgb), 0.55);
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: nb-orbit 7s linear infinite;
}

@keyframes nb-orbit {
  to {
    transform: rotate(360deg);
  }
}

.nb-nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
}

.nb-nav__link {
  position: relative;
  padding: 0.55rem 0.9rem;
  font-size: var(--nb-fs-sm);
  font-weight: 550;
  color: var(--nb-mist);
  border-radius: var(--nb-r-pill);
  transition:
    color var(--nb-t-micro) var(--nb-ease-orbit),
    background var(--nb-t-micro) var(--nb-ease-orbit);
  white-space: nowrap;
}

.nb-nav__link:hover {
  color: var(--nb-white);
  background: var(--nb-surface-1);
}

/* Active nav item marked by an ember pip beneath — not a filled pill. */
.nb-nav__link.is-active {
  color: var(--nb-white);
}

.nb-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--nb-ember);
  box-shadow: 0 0 8px rgba(var(--nb-ember-rgb), 0.9);
}

.nb-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  margin-left: auto;
}

.nb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--nb-mist);
  border: 1px solid transparent;
  border-radius: 50%;
  transition:
    color var(--nb-t-micro) var(--nb-ease-orbit),
    background var(--nb-t-micro) var(--nb-ease-orbit),
    border-color var(--nb-t-micro) var(--nb-ease-orbit);
}

.nb-icon-btn:hover {
  color: var(--nb-white);
  background: var(--nb-surface-2);
  border-color: var(--nb-line);
}

.nb-icon-btn svg {
  width: 19px;
  height: 19px;
}

.nb-cart-count {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-family: var(--nb-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: var(--nb-ember);
  border: 1.5px solid var(--nb-void);
  border-radius: 99px;
}

/* Currency toggle — segmented instrument switch. */
.nb-curr {
  display: inline-flex;
  padding: 3px;
  background: var(--nb-surface-1);
  border: 1px solid var(--nb-line-soft);
  border-radius: var(--nb-r-pill);
}

.nb-curr button {
  padding: 0.28rem 0.6rem;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  font-weight: 600;
  color: var(--nb-dust);
  border-radius: var(--nb-r-pill);
  transition:
    color var(--nb-t-micro) var(--nb-ease-orbit),
    background var(--nb-t-micro) var(--nb-ease-orbit);
}

.nb-curr button.is-active {
  color: var(--nb-white);
  background: var(--nb-surface-3);
}

/* ---- Mobile menu trigger ---- */
.nb-burger {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--nb-line);
}

.nb-burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--nb-frost);
  border-radius: 2px;
  transition: transform var(--nb-t-fast) var(--nb-ease-mass);
}

.nb-burger span + span {
  margin-top: 4.5px;
}

.nb-burger.is-open span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nb-burger.is-open span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* ---- Mobile drawer: a panel that expands from the bar, not a black sheet -- */
.nb-drawer {
  position: fixed;
  inset: var(--nb-nav-h) 0 0 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: var(--nb-s5) var(--nb-gutter) var(--nb-s7);
  background: linear-gradient(180deg, rgba(7, 9, 18, 0.97), rgba(4, 5, 10, 0.99));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nb-drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--nb-s4);
  padding: 0.9rem 0;
  font-family: var(--nb-font-display);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  color: var(--nb-frost);
  border-bottom: 1px solid var(--nb-line-soft);
}

.nb-drawer__link .nb-drawer__idx {
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: 0.2em;
  color: var(--nb-dust);
}

.nb-drawer__link.is-active {
  color: var(--nb-white);
}

.nb-drawer__link.is-active .nb-drawer__idx {
  color: var(--nb-ember);
}

.nb-drawer__foot {
  margin-top: auto;
  padding-top: var(--nb-s6);
  display: grid;
  gap: var(--nb-s3);
}

/* `display:flex` above out-specifies the UA's `[hidden]{display:none}`, so the
   attribute alone would never hide the drawer. This restores it. */
.nb-drawer[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .nb-nav .nb-nav__links {
    display: none;
  }

  .nb-nav .nb-burger {
    display: grid;
  }

  /* Scoped to .nb-nav on purpose: these elements also carry utility classes
     (.nb-row) that are declared later in this file, and a bare class selector
     here would lose to them on source order. */
  .nb-nav .nb-nav__auth-desktop {
    display: none;
  }
}

@media (min-width: 1024px) {
  .nb-drawer {
    display: none;
  }
}

/* ------------------------------------------------------------ 11. FOOTER */

.nb-footer {
  position: relative;
  margin-top: var(--nb-section);
  border-top: 1px solid var(--nb-line-soft);
  background: linear-gradient(180deg, transparent, rgba(7, 9, 18, 0.85));
}

.nb-footer__inner {
  max-width: var(--nb-max);
  margin-inline: auto;
  padding: var(--nb-s8) var(--nb-gutter) var(--nb-s6);
}

.nb-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--nb-s7) var(--nb-s5);
  padding-bottom: var(--nb-s7);
  border-bottom: 1px solid var(--nb-line-soft);
}

.nb-footer__col h2 {
  margin-bottom: var(--nb-s4);
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nb-dust);
}

.nb-footer__col a {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--nb-fs-sm);
  color: var(--nb-mist);
  transition: color var(--nb-t-micro) var(--nb-ease-orbit);
  width: fit-content;
}

.nb-footer__col a:hover {
  color: var(--nb-white);
}

.nb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s4);
  padding-top: var(--nb-s5);
}

/* Oversized wordmark bleeding off the bottom — the "cierre visual memorable".
   Cropped by overflow, so it reads as a horizon rather than a logo. */
.nb-footer__wordmark {
  display: block;
  margin-top: var(--nb-s6);
  font-family: var(--nb-font-display);
  font-size: clamp(3.4rem, 17vw, 15rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  max-height: 0.62em;
}

/* --------------------------------------------------------- 12. UTILITIES */

.nb-stack {
  display: grid;
  gap: var(--nb-s4);
}

.nb-row {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
}

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

.nb-hide {
  display: none !important;
}

@media (max-width: 767px) {
  .nb-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .nb-only-mobile {
    display: none !important;
  }
}

/* Horizontal rails that must scroll on small screens without breaking
   the page's own overflow. */
.nb-rail-scroll {
  display: flex;
  gap: var(--nb-s3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.nb-rail-scroll::-webkit-scrollbar {
  display: none;
}

.nb-rail-scroll > * {
  scroll-snap-align: start;
}

[x-cloak] {
  display: none !important;
}