/* ==========================================================================
   NEBULA — "Chrome & Ink"
   A design system, not a stylesheet. Read §0 before changing anything below:
   every component is built from those tokens and nothing declares a raw
   colour, size or radius of its own.

   The one rule that governs the look: the interface is achromatic.
   Colour appears only to report STATE (in stock, operational, failed).
   The product artwork is silver-on-black, so an interface with no hue of its
   own leaves the art as the only loud thing on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §0  TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* -- Surfaces. A faint cool cast; pure grey reads dead, blue reads SaaS. -- */
  --c-canvas:      #07070A;   /* hsl(240 17% 3%)  page */
  --c-sunken:      #0A0A0E;   /* wells, media backing  */
  --c-surface:     #101014;   /* cards, panels         */
  --c-raised:      #16161C;   /* inputs, chips, controls */
  --c-hover:       #1E1E26;   /* control hover         */

  /* -- Lines. Three weights, and only three. -- */
  --c-line-1: rgba(255, 255, 255, 0.07);   /* hairline, internal divisions */
  --c-line-2: rgba(255, 255, 255, 0.12);   /* component border            */
  --c-line-3: rgba(255, 255, 255, 0.22);   /* hover, focus, emphasis      */

  /* -- Text. Three levels; a fourth would stop meaning anything. -- */
  --c-text-1: #F2F2F5;   /* headings, values          */
  --c-text-2: #A0A0AC;   /* body, descriptions        */
  --c-text-3: #6E6E7A;   /* labels, captions, meta    */

  /* -- Chrome. The primary action, and the only "brand" fill there is. -- */
  --c-chrome:      #FFFFFF;
  --c-chrome-dim:  #E2E2E8;
  --c-on-chrome:   #0A0A0E;

  /* -- State. The ONLY hues in the system. Never decorative. -- */
  --c-ok:   #3FBF84;
  --c-warn: #D9A441;
  --c-err:  #E5484D;

  /* -- Type -- */
  --f-ui:   'Instrument Sans', system-ui, -apple-system, sans-serif;
  --f-num:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: 2.5rem;     /* 40 — page title            */
  --fs-h1:      2rem;       /* 32                         */
  --fs-h2:      1.5rem;     /* 24 — section               */
  --fs-h3:      1.1875rem;  /* 19 — card title, sub-head  */
  --fs-h4:      1rem;       /* 16                         */
  --fs-body:    0.9375rem;  /* 15 — prose                 */
  --fs-sm:      0.875rem;   /* 14 — dense UI              */
  --fs-xs:      0.8125rem;  /* 13 — meta                  */
  --fs-label:   0.6875rem;  /* 11 — uppercase mono label  */

  /* -- Space. 4px base. Nothing between steps. -- */
  --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;

  /* -- Radius. SQUARED, on trial. One edit reverts the whole site: the
        rounded set was  sm 6px · md 10px · lg 14px · circle 50%.
        Nothing anywhere declares a radius of its own, so these four values
        are the entire shape language. -- */
  --r-sm:     0px;    /* badge, chip, input, tab        */
  --r-md:     2px;    /* button, card, panel, nav item  */
  --r-lg:     2px;    /* modal, page-level container    */
  --r-circle: 1px;    /* the state dot now reads as an LED rather than a bead */

  /* -- Elevation. Cards do not float; they sit. -- */
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --e-2: 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --e-3: 0 32px 72px -32px rgba(0, 0, 0, 0.95);

  /* -- Motion -- */
  --t-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   §1  BASE
   -------------------------------------------------------------------------- */

body {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A single light source, top centre. No starfield, no gradient wash: the
   artwork already supplies the space imagery. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60rem 26rem at 50% -10rem, rgba(255, 255, 255, 0.045), transparent 70%);
}

::selection {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   §2  TYPE
   Instrument Sans for everything read as language, JetBrains Mono for
   everything read as a quantity. A price is data, not prose.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text-1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

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

/* Numerals: one class, used wherever a figure appears. */
.nb-num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* Labels: small, spaced, uppercase, mono. The system's caption voice. */
.nb-label {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   §3  PRIMITIVES
   Declared once here. Every page uses these and adds nothing of its own.
   -------------------------------------------------------------------------- */

/* ---- 3.1 Button ---------------------------------------------------------- */

.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast);
}

.nb-btn i { font-size: 0.8em; }

.nb-btn--primary {
  background: var(--c-chrome);
  border-color: var(--c-chrome);
  color: var(--c-on-chrome);
}

.nb-btn--primary:hover {
  background: var(--c-chrome-dim);
  border-color: var(--c-chrome-dim);
}

.nb-btn--secondary {
  background: var(--c-raised);
  border-color: var(--c-line-2);
  color: var(--c-text-1);
}

.nb-btn--secondary:hover {
  background: var(--c-hover);
  border-color: var(--c-line-3);
}

.nb-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-text-2);
}

.nb-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-text-1);
}

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

.nb-btn--sm    { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.nb-btn--lg    { height: 46px; padding: 0 var(--s-6); font-size: var(--fs-body); }
.nb-btn--block { width: 100%; }

/* ---- 3.2 Badge ----------------------------------------------------------- */

/* One badge style, whatever colour the product record carries. Per-badge
   colour is deliberately ignored: five hues on one card was the loudest
   thing on the page and none of them meant anything. */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-text-1);
}

.nb-badge i { font-size: 0.9em; color: var(--c-text-2); }

.nb-badge--link:hover { border-color: var(--c-line-3); }

/* ---- 3.3 Field ----------------------------------------------------------- */

.nb-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 40px;
  padding: 0 var(--s-4);
  background: var(--c-raised);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  transition: border-color var(--t-fast);
}

.nb-field:focus-within { border-color: var(--c-line-3); }
.nb-field i { font-size: var(--fs-xs); }

.nb-field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text-1);
}

.nb-field input::placeholder { color: var(--c-text-3); }
.nb-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- 3.4 State dot ------------------------------------------------------- */

.nb-dot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--s-2);
  border-radius: var(--r-circle);
  background: var(--c-ok);
  vertical-align: 0.12em;
}

.nb-dot--err::before  { background: var(--c-err); }
.nb-dot--neutral::before { background: var(--c-text-3); }

/* --------------------------------------------------------------------------
   §4  THE BAR
   Wordmark, navigation and shop controls in ONE row. They used to be two
   stacked blocks that together ran 150px deep before any product was on
   screen; merged they cost 58px and read as one object.
   -------------------------------------------------------------------------- */

.nb-bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 58px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
}

.nb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
  color: var(--c-text-1);
}

.nb-brand img { width: 22px; height: 22px; border-radius: var(--r-sm); }

.nb-brand span {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* A hairline between the wordmark and the navigation: one object, two jobs. */
.nb-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--s-5);
  border-left: 1px solid var(--c-line-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.nb-nav::-webkit-scrollbar { display: none; }

.nb-nav-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nb-nav-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--c-text-1); }

/* The accent is white, so the active tab is a light wash rather than a hue. */
.nb-nav-link.is-active { background: rgba(255, 255, 255, 0.09); color: var(--c-text-1); }

.nb-bar-end {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}

/* The credential, compact. The full three figures live in the trust strip,
   where a buyer has a reason to read them; here it is a footnote. */
.nb-cred {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}

.nb-cred i { font-size: 0.7rem; color: var(--c-text-1); }
.nb-cred-num { font-weight: 500; color: var(--c-text-1); }
.nb-cred-unit { font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3); }

.nb-cred-sep {
  width: 1px;
  height: 11px;
  background: var(--c-line-2);
}

.nb-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-raised);
  color: var(--c-text-2);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

.nb-icon-btn:hover { color: var(--c-text-1); border-color: var(--c-line-3); }
.nb-icon-btn.is-active { color: var(--c-text-1); background: var(--c-hover); }
.nb-icon-btn svg { width: 16px; height: 16px; }
.nb-icon-btn--sm { width: 30px; height: 30px; font-size: var(--fs-xs); }

.nb-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-circle);
  background: var(--c-chrome);
  font-family: var(--f-num);
  font-size: 10px;
  font-weight: 600;
  color: var(--c-on-chrome);
}

/* The currency select is a stock control; give it the bar's own metrics. */
.nb-bar-end .currency-selector select,
.nb-bar-end .choices__inner {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: var(--r-md) !important;
  background: var(--c-raised) !important;
  border-color: var(--c-line-2) !important;
  font-size: var(--fs-xs) !important;
}

/* --------------------------------------------------------------------------
   §4b  THE FOOT
   One line. A shop with four legal pages does not need a two-storey footer.
   -------------------------------------------------------------------------- */

.nb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-12);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
}

.nb-foot-left,
.nb-foot-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  min-height: 34px;
}

.nb-foot-mark { width: 18px; height: 18px; border-radius: var(--r-sm); opacity: 0.85; }

.nb-foot-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

.nb-foot-copy,
.nb-foot-link {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.nb-foot-link { transition: color var(--t-fast); }
.nb-foot-link:hover { color: var(--c-text-1); }

.nb-foot-socials { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: var(--s-2); }

/* --------------------------------------------------------------------------
   §5  SECTION HEAD
   One heading treatment for every section on every page.
   -------------------------------------------------------------------------- */

.nb-products { padding: var(--s-8) 0 var(--s-2); }

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

.nb-section-head h2 {
  margin: 0;
  font-size: var(--fs-display);
  line-height: 1.05;
}

.nb-section-head p {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-3);
}

.nb-search { width: 260px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   §6  PRODUCT GRID · CARD · TRUST STRIP
   -------------------------------------------------------------------------- */

.nb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.nb-grid-item { min-width: 0; }

.nb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.nb-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-line-3);
  box-shadow: var(--e-3);
}

.nb-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--c-sunken);
  border-bottom: 1px solid var(--c-line-1);
}

.nb-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.nb-card:hover .nb-card-media > img { transform: scale(1.03); }

.nb-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2.5rem;
  color: var(--c-line-3);
}

.nb-badges {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  pointer-events: none;
}

.nb-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--s-5);
  text-align: center;
}

.nb-card-body h3 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.nb-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-3) 0 var(--s-5);
}

.nb-price {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-text-1);
  white-space: nowrap;
}

.nb-price-dash { color: var(--c-text-3); margin: 0 2px; }

.nb-price-was {
  margin-left: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

.nb-stock {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}

.nb-stock::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--s-2);
  border-radius: var(--r-circle);
  background: var(--c-ok);
  vertical-align: 0.1em;
}

.nb-stock--empty         { color: var(--c-err); }
.nb-stock--empty::before { background: var(--c-err); }
.nb-stock--group::before { background: var(--c-text-3); }

/* .nb-cta adds only what the card needs on top of the primary button:
   its position, and the arrow that answers the hover. */
.nb-cta { margin-top: auto; }
.nb-cta i { font-size: 0.75em; transition: transform var(--t-base); }
.nb-card:hover .nb-btn--primary { background: var(--c-chrome-dim); border-color: var(--c-chrome-dim); }
.nb-card:hover .nb-cta i { transform: translateX(3px); }

/* ---- Dense variant: the catalogue page -----------------------------------
   Home is a shop window: two large cards, centred, a chrome call to action.
   /products is a catalogue: fixed-width tracks flowing from the left, a
   tighter card, and a SECONDARY action — four chrome buttons in a row is a
   wall of white in which nothing is primary any more. */

.nb-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(0, 260px));
  justify-content: start;
}

.nb-card--sm .nb-card-body {
  padding: var(--s-4);
  text-align: left;
}

.nb-card--sm .nb-card-body h3 {
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* Price left, state right, on one line — the catalogue reading order. */
.nb-card--sm .nb-card-meta {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

.nb-card--sm .nb-price     { font-size: var(--fs-xs); }
.nb-card--sm .nb-price-was { margin-left: var(--s-1); font-size: 11px; }
.nb-card--sm .nb-badges    { top: var(--s-2); left: var(--s-2); right: var(--s-2); gap: var(--s-1); }
.nb-card--sm .nb-badge     { padding: 3px 6px; font-size: 10px; letter-spacing: 0.08em; }

/* ---- Trust strip --------------------------------------------------------- */

/* Placed after the catalogue and before the reviews: the buyer has just seen
   a price, which is the moment the question "can I trust this" arrives.
   In the header it was furniture; here it is an answer, and the reviews
   below confirm it on the next line. */
.nb-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-10);
  background: var(--c-surface);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
}

.nb-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
}

.nb-trust-item + .nb-trust-item { border-left: 1px solid var(--c-line-1); }

.nb-trust-num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text-1);
}

.nb-trust-label {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  text-align: center;
}

/* Empty catalogue, and the pager under it. */
.nb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-16) var(--s-4);
  color: var(--c-text-3);
}

.nb-empty i { font-size: 2.2rem; color: var(--c-line-3); }
.nb-empty p { margin: 0; font-size: var(--fs-sm); }

.nb-pagination { margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   §7  GROUP MODAL
   -------------------------------------------------------------------------- */

.nb-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  overflow-y: auto;
}

.nb-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nb-modal-panel {
  position: relative;
  width: 100%;
  max-width: 62rem;
  padding: var(--s-6);
  background: var(--c-canvas);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--e-3);
}

.nb-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.nb-modal-head h3 { margin: 0; font-size: var(--fs-h2); }

.nb-modal-head p {
  margin: var(--s-2) 0 0;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.nb-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-circle);
  background: var(--c-raised);
  color: var(--c-text-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.nb-modal-close:hover { color: var(--c-text-1); border-color: var(--c-line-3); }

/* --------------------------------------------------------------------------
   §8  PRODUCT PAGE
   -------------------------------------------------------------------------- */

.component .bg-card {
  background: var(--c-surface);
  border-color: var(--c-line-1);
  border-radius: var(--r-md);
}

/* Tabs: an underlined rail. A chip row competes with the badges above it. */
.nb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line-1);
}

.nb-tab {
  position: relative;
  padding: var(--s-2) var(--s-3) var(--s-3);
  background: none;
  border: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast);
}

.nb-tab:hover { color: var(--c-text-2); }

.nb-tab::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: -1px;
  height: 2px;
  background: var(--c-chrome);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.nb-tab.is-active { color: var(--c-text-1); }
.nb-tab.is-active::after { opacity: 1; transform: scaleX(1); }

/* ---- The artwork ---------------------------------------------------------
   The box is the hero of the card, not of the page. At full column width it
   ran 700px tall and pushed the description — which is what a buyer actually
   reads before paying — below the fold. 540px keeps the description in the
   first screen while leaving the artwork room to read, and `contain` means
   the square box is never cropped. */

[data-component-id="product-page"] .aspect-product-page-image {
  aspect-ratio: auto;
  height: 540px;
  background: var(--c-sunken);
}

[data-component-id="product-page"] .aspect-product-page-image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

[data-component-id="product-page"] .splide,
[data-component-id="product-page"] .splide__list,
[data-component-id="product-page"] .splide__slide { height: 100%; }

[data-component-id="product-page"] .badges { gap: var(--s-2) !important; }

/* ---- The buy panel -------------------------------------------------------
   Price and state, then the plan, then the action. Everything that was
   repeated per row — three identical "In Stock" lines, a per-unit price that
   only differs at a quantity nobody picks — is gone. */

.nb-buy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.nb-buy-price {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text-1);
}

/* Section labels in the panel share the caption voice. */
[data-component-id="product-page"] label[for="variant"],
.nb-qty-label {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ---- Plan picker --------------------------------------------------------- */

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

.nb-variant {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s-4);
  background: var(--c-raised);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}

.nb-variant:hover:not(.is-active):not(:disabled) {
  border-color: var(--c-line-2);
  color: var(--c-text-1);
}

/* Chrome marks the choice: the accent is white, so selection is a bright
   edge rather than a hue. */
.nb-variant.is-active {
  background: var(--c-hover);
  border-color: var(--c-chrome);
  color: var(--c-text-1);
}

.nb-variant:disabled { opacity: 0.45; cursor: not-allowed; }

.nb-variant-name { flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 600; }

.nb-variant-out {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-err);
}

.nb-variant-price {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-text-1);
  white-space: nowrap;
}

.nb-variant-price s {
  margin-left: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

.nb-variant-img { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; }

/* ---- Quantity: a control, not a section ---------------------------------- */

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

.nb-qty-control {
  display: inline-flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  background: var(--c-raised);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}

.nb-qty-control button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  color: var(--c-text-2);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nb-qty-control button:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text-1); }
.nb-qty-control button:disabled { opacity: 0.3; pointer-events: none; }
.nb-qty-control button svg { width: 13px; height: 13px; }

.nb-qty-control input {
  width: 44px;
  height: 100%;
  border: 0;
  border-inline: 1px solid var(--c-line-1);
  background: transparent;
  text-align: center;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-text-1);
  -moz-appearance: textfield;
}

.nb-qty-control input:focus { outline: none; }

/* Shop rating, directly under the price. Highest-intent moment on the site;
   labelled "shop reviews" because it is the shop's score, not this product's. */
.nb-rating {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-1);
}

.nb-rating-stars { display: inline-flex; gap: 2px; color: var(--c-text-1); font-size: var(--fs-xs); }

.nb-rating-score {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-1);
}

.nb-rating-count {
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* The price, the variant prices and the quantity are all figures. */
[data-component-id="product-page"] [x-text*="appCurrency"],
[data-component-id="product-page"] input[type="number"] {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Keep the buy panel beside the description instead of scrolling away. */
@media (min-width: 1024px) {
  [data-component-id="product-page"] .lg\:w-2\/5 > div {
    position: sticky;
    top: var(--s-5);
  }
}

/* --------------------------------------------------------------------------
   §9  DESCRIPTION
   `.editor` scopes its own rules, so these must too or they lose.
   -------------------------------------------------------------------------- */

.editor { font-size: var(--fs-body); }

.editor .e-paragraph {
  margin: 0 0 0.9em;
  line-height: 1.7;
  color: var(--c-text-2);
}

.editor .e-paragraph strong,
.editor .e-listitem strong { color: var(--c-text-1); font-weight: 600; }

.editor .e-heading-h3 {
  margin: 1.9em 0 0.7em;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--c-text-1);
}

.editor .e-list-ul { margin: 0 0 1.1em; padding-left: 0; list-style: none; }

.editor .e-listitem {
  position: relative;
  margin: 0 0 0.6em;
  padding-left: 1.3em;
  line-height: 1.7;
  list-style: none;
  color: var(--c-text-2);
}

.editor .e-listitem::marker { content: ""; }

.editor .e-listitem::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: var(--r-circle);
  background: var(--c-text-3);
}

.editor code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--f-num);
  font-size: 0.86em;
  color: var(--c-text-1);
}

/* --------------------------------------------------------------------------
   §10  REVIEWS · FAQ
   -------------------------------------------------------------------------- */

/* The stock components mark headings with a left accent rule. One heading
   treatment, so it goes. */
.component h2.border-l-accent-500 {
  display: block;
  margin-bottom: var(--s-6);
  padding-left: 0;
  border-left: 0;
  font-size: var(--fs-h2);
}

[data-component-id="products-page"] h1 {
  margin-bottom: var(--s-6);
  padding-left: 0;
  text-align: left;
  font-size: var(--fs-display);
  line-height: 1.05;
}

/* Review dates are data. */
[data-component-id="feedbacks"] .text-xs { font-family: var(--f-num); letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   §11  STOCK TEMPLATE SWEEP
   123 rounded-lg, 24 rounded-md and 12 rounded-full ship in the templates
   this theme does not own. Left alone they reintroduce three more radii, so
   they are folded into the scale here. This block is the reason a button
   looks the same on every page.
   -------------------------------------------------------------------------- */

.component .rounded-lg,
.component .rounded-md,
footer .rounded-lg,
header .rounded-lg,
header .rounded-md { border-radius: var(--r-md); }

.component .rounded-xl,
.component .rounded-2xl { border-radius: var(--r-lg); }

/* rounded-full is right for dots and avatars and wrong for controls. */
.component a.rounded-full,
.component button.rounded-full,
.component input.rounded-full { border-radius: var(--r-md); }

/* Stock buttons inherit the primary: accent is white at the theme level, so
   bg-accent-500 already lands on chrome. Only the shape needs correcting. */
.component .bg-accent-500 { color: var(--c-on-chrome); }

.component input:not([type="checkbox"]):not([type="radio"]),
.component select,
.component textarea {
  border-radius: var(--r-sm);
  background: var(--c-raised);
  border-color: var(--c-line-2);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   §10b  FAQ
   Eight questions used to be eight cards: eight borders, eight radii and
   eight shadows, all saying "separate object" about things that are one
   list. One panel, hairline-divided, lets the questions read as a sequence
   and leaves the emphasis for the row that is actually open.
   -------------------------------------------------------------------------- */

.nb-faq { padding: var(--s-8) 0 var(--s-2); }

.nb-faq-title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h2);
  color: var(--c-text-1);
}

.nb-faq-list {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line-1);
  border-radius: var(--r-md);
}

.nb-faq--narrow { max-width: 46rem; margin-inline: auto; }

.nb-faq-item + .nb-faq-item { border-top: 1px solid var(--c-line-1); }

.nb-faq-item.is-open { background: rgba(255, 255, 255, 0.015); }

.nb-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  color: var(--c-text-2);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.nb-faq-q:hover { color: var(--c-text-1); background: rgba(255, 255, 255, 0.025); }
.nb-faq-item.is-open .nb-faq-q { color: var(--c-text-1); }

.nb-faq-q i {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--c-text-3);
  transition: transform var(--t-base), color var(--t-fast);
}

.nb-faq-item.is-open .nb-faq-q i { transform: rotate(180deg); color: var(--c-text-1); }

.nb-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base);
}

/* The answer hangs under the question rather than starting at the edge, so
   an open row reads as belonging to the one above it. */
.nb-faq-a p {
  max-width: 68ch;
  margin: 0;
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-text-2);
}

@media (prefers-reduced-motion: reduce) {
  .nb-faq-a, .nb-faq-q i { transition: none; }
}

/* --------------------------------------------------------------------------
   §11b  CHOICES.JS  (currency and language pickers)
   The library ships a light dropdown: #fff ground, #f2f2f2 on the highlighted
   row, #fff on the search field. The theme darkens the list but not those
   three, so the selected currency was white-on-white and unreadable. Every
   ground the library paints is restated here from the token set.
   -------------------------------------------------------------------------- */

/* built.css rounds the widget in four places, one of them the outer .choices
   wrapper whose corners show through the control. The whole family is taken
   onto the radius scale here so it follows the site's shape language, and
   both pickers are covered, not just the currency one. */
.choices,
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded],
.currency-selector .choices__list.choices__list--dropdown,
.language-selector .choices__list.choices__list--dropdown {
  border-radius: var(--r-md) !important;
}

.choices__item,
.choices__input,
.choices__list--dropdown .choices__item .symbol {
  border-radius: var(--r-sm) !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line-2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--e-3);
  overflow: hidden;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

/* The row under the cursor, whatever it is. Matching only
   .choices__item--selectable left disabled rows to the library, and Choices
   swaps that class for --disabled, so those rows kept the light ground. */
.choices__list--dropdown .choices__item.is-highlighted,
.choices__list[aria-expanded] .choices__item.is-highlighted,
.choices__list--dropdown .choices__item:hover,
.choices__list[aria-expanded] .choices__item:hover {
  background: var(--c-hover) !important;
  color: var(--c-text-1) !important;
}

/* A disabled row still has to be readable while it says "unavailable". */
.choices__list--dropdown .choices__item--disabled {
  opacity: 1;
  color: var(--c-text-3) !important;
}

.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
  color: var(--c-text-1);
}

.choices__list--dropdown .choices__item .symbol {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--r-sm);
  color: var(--c-text-1) !important;
}

.choices__list--dropdown .choices__item .code { color: var(--c-text-1); }
.choices__list--dropdown .choices__item .default,
.choices__list--dropdown .choices__item .name { color: var(--c-text-3); }

/* The filter field at the top of the list. */
.choices[data-type*="select-one"] .choices__input,
.choices__input {
  background: var(--c-raised) !important;
  border-bottom: 1px solid var(--c-line-1) !important;
  color: var(--c-text-1) !important;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
}

.choices__input::placeholder { color: var(--c-text-3); }

.choices__heading {
  border-bottom: 1px solid var(--c-line-1) !important;
  color: var(--c-text-3) !important;
  font-family: var(--f-num);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.choices__placeholder { color: var(--c-text-3); opacity: 1; }

/* The control itself keeps the bar's metrics; is-open borders in chrome. */
.nb-bar-end .choices.is-open .choices__inner {
  border-color: var(--c-line-3) !important;
}

/* The bot check on the buy form. Visually hidden rather than display:none,
   so the widget still lays out, still runs its proof of work and still fires
   the statechange the form listens for. */
.nb-altcha {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   §12  SCROLLBAR
   -------------------------------------------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-md);
  background-clip: content-box;
  background-color: rgba(255, 255, 255, 0.18);
}

::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); }

/* --------------------------------------------------------------------------
   §13  RESPONSIVE · MOTION
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* Two cards in a three-column grid leave a hole. This stops matching by
     itself the moment a third top-level product exists. */
  .nb-grid:not(.nb-grid--dense):has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 24rem));
    justify-content: center;
  }

  .nb-grid:not(.nb-grid--dense):has(> :only-child) {
    grid-template-columns: minmax(0, 24rem);
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .nb-grid--dense { grid-template-columns: repeat(auto-fill, minmax(0, 240px)); }
}

@media (max-width: 860px) {
  .nb-bar { flex-wrap: wrap; row-gap: var(--s-2); padding-bottom: var(--s-3); }
  .nb-nav { order: 3; width: 100%; padding-left: 0; border-left: 0; }
  .nb-bar-end { margin-left: auto; }
  .nb-cred { display: none; }
}

@media (max-width: 640px) {
  :root { --fs-display: 1.875rem; }

  .nb-brand span { letter-spacing: 0.18em; }
  .nb-foot { justify-content: center; text-align: center; }
  .nb-foot-left, .nb-foot-right { justify-content: center; }

  .nb-section-head { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .nb-search       { width: 100%; }
  .nb-grid, .nb-grid--dense { grid-template-columns: minmax(0, 1fr); }
  .nb-card-body    { padding: var(--s-4); }
  .nb-modal-panel  { padding: var(--s-4); }
  header h1        { letter-spacing: 0.22em; }

  .nb-trust { grid-template-columns: 1fr; }
  .nb-trust-item + .nb-trust-item {
    border-left: 0;
    border-top: 1px solid var(--c-line-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-card, .nb-card-media > img, .nb-cta, .nb-cta i, .nb-tab::after, .nb-btn {
    transition: none;
  }
  .nb-card:hover { transform: none; }
  .nb-card:hover .nb-card-media > img,
  .nb-card:hover .nb-cta i { transform: none; }
}