/*
 * store.css: the storefront (every merchant domain: /, /tools/{id}) in the Polished Pro finish. Production copy of the approved
 * prototype designs/public-site/store/_shared/store.css; loaded by guest::layouts.base (nx.page-assets, panel "public", page
 * "store") on top of KTUI (styles-D8ZooNs_.css) + nox-ui.css + nox-panel.css + nox-customer.css (nx.assets, panel "customer").
 * Tokens only (--primary, --border, --muted, --mono, --card, --secondary-foreground, --nx-line*, --nx-link), so light and dark
 * come from the finish. The store accent (--nx-store-from / --nx-store-to / --nx-store-tint) is identity only: the mark, the step
 * numbers and a soft glow behind the hero; buttons and links stay --primary like every panel. Every class is nx-sf- prefixed.
 * Changes from the prototype: no demo note; the "ask for a tool" tile's nth-child counts without Alpine's <template> (§5);
 * §9 replaces what Alpine drew (menu and theme icons/labels, the menu sheet's hidden state).
 *
 *  1 base, page frame          5 tool cards, "ask for a tool" tile, empty catalogue
 *  2 header + phone menu       6 steps, payment, support
 *  3 hero + at a glance        7 tool page: head, description, buy card, plan picker, phone buy bar, other tools, not found
 *  4 section heads + bands     8 floating chat, footer
 *                              9 runtime without Alpine (public/js/pages/public/store.js)
 */

/* ============ 1. base ============ */
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.nx-sf { min-height: 100vh; display: flex; flex-direction: column; background: var(--background); }
.nx-sf-page { flex: 1 0 auto; display: flex; flex-direction: column; }
.nx-sf a:focus-visible, .nx-sf button:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
.nx-sf .kt-btn:focus-visible { border-radius: 8px; }
.nx-sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* inline links inside sentences look like links (the old store inherited the text colour, M8) */
.nx-sf-link { color: var(--nx-link); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--nx-link) 35%, transparent); text-underline-offset: 3px; }
.nx-sf-link:hover { text-decoration-color: currentColor; }

/* ============ 2. header + phone menu ============ */
/* sticky for real (the old header sat inside overflow:hidden and never stuck, M4) */
.nx-sf-top {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--nx-line-strong);
  background: color-mix(in oklab, var(--background) 84%, transparent);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.nx-sf-top-in { display: flex; align-items: center; gap: 1rem; height: 4rem; flex-grow: 0; }
.nx-sf-brand { min-width: 0; flex: 0 1 auto; gap: .625rem; }
.nx-sf-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--mono); }
.nx-sf-nav { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nx-sf-nav a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--secondary-foreground); transition: color .12s, background-color .12s; }
.nx-sf-nav a:hover { color: var(--mono); background: var(--muted); }
.nx-sf-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nx-sf-account { display: flex; align-items: center; gap: .5rem; }
.nx-sf-actions .kt-btn { height: 2.25rem; }
.nx-sf-actions .kt-btn-icon { width: 2.25rem; }
.nx-sf-actions .kt-btn i { font-size: 1rem; }
.nx-sf-menu-btn { display: none !important; }
/* phone / tablet menu: a sheet under the bar with the sections, the account links and the theme switch */
.nx-sf-menu { border-top: 1px solid var(--border); background: var(--background); box-shadow: var(--nx-shadow-lg); max-height: calc(100vh - 4rem); overflow-y: auto; }
.nx-sf-menu-in { display: grid; gap: 1rem; padding-block: .75rem 1.25rem; }
.nx-sf-menu nav { display: flex; flex-direction: column; }
.nx-sf-menu nav a, .nx-sf-menu-row { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: 0 .5rem; border-radius: 8px; font-size: .9375rem; font-weight: 500; color: var(--mono); }
.nx-sf-menu nav a:hover, .nx-sf-menu-row:hover { background: var(--muted); }
.nx-sf-menu nav a i, .nx-sf-menu-row i { font-size: 1.125rem; color: var(--muted-foreground); }
.nx-sf-menu-row { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: start; }
.nx-sf-menu-row span:last-child { margin-inline-start: auto; font-size: .8125rem; font-weight: 400; color: var(--secondary-foreground); }
.nx-sf-menu-label { padding: 0 .5rem .25rem; }
.nx-sf-menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nx-sf-menu-cta .kt-btn { height: 2.75rem; justify-content: center; }
@media (min-width: 64rem) { .nx-sf-menu { display: none !important; } }
@media (max-width: 63.98rem) {
  .nx-sf-nav { display: none; }
  .nx-sf-actions { margin-inline-start: auto; }
  .nx-sf-menu-btn { display: inline-flex !important; }
}
@media (max-width: 39.98rem) {
  .nx-sf-top-in { gap: .5rem; }
  .nx-sf-theme, .nx-sf-join, .nx-sf-subs-label { display: none !important; }
  .nx-sf-actions { gap: .375rem; }
  .nx-sf-signin { padding-inline: .75rem; }
}
/* the currency switcher (themes::_shared.currency, the .nx-cur look in nox-ui.css; task 780): as tall as the header's buttons;
   on phones the symbols alone ("₹ | $"), the codes stay for screen readers */
.nx-sf-cur .th-cur-opt { min-height: 2.125rem; }
@media (max-width: 39.98rem) {
  .nx-sf-cur .th-cur-face { min-width: 2.125rem; padding-inline: .4rem; }
  .nx-sf-cur .th-cur-sym { font-size: .9375rem; }
  .nx-sf-cur .th-cur-sym + .th-cur-code { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* phones with the switcher: the header's Sign in moves to the menu sheet (it holds Sign in + Create account, as every other theme's
   phone menu does), so the store's name keeps its room next to "₹ | $" instead of being cut to "Test.com T…" */
@media (max-width: 39.98rem) { .nx-sf-top-in:has(.nx-sf-cur) .nx-sf-signin { display: none !important; } }
/* a local price's USD figure ("Also show USD to local visitors"): small, after the unit */
.nx-sf-price-usd { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }

/* ============ 3. hero + at a glance ============ */
/* the store's colours as a soft glow + the auth pages' dot grid, faded out: one element, so no tiling seam (L1) */
.nx-sf-hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--border); overflow: clip; }
.nx-sf-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--foreground) 8%, transparent) 1px, transparent 1px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.nx-sf-hero::after {
  content: ""; position: absolute; z-index: -1; inset: -10rem 0 auto; height: 34rem; pointer-events: none;
  background: radial-gradient(50% 60% at 25% 45%, color-mix(in oklab, var(--nx-store-tint) 13%, transparent), transparent 70%),
              radial-gradient(40% 50% at 85% 30%, color-mix(in oklab, var(--nx-store-to) 9%, transparent), transparent 70%);
}
.dark .nx-sf-hero::after {
  background: radial-gradient(50% 60% at 25% 45%, color-mix(in oklab, var(--nx-store-tint) 20%, transparent), transparent 70%),
              radial-gradient(40% 50% at 85% 30%, color-mix(in oklab, var(--nx-store-to) 13%, transparent), transparent 70%);
}
.nx-sf-hero-in { display: grid; gap: 2rem; padding-block: 3.25rem 3rem; flex-grow: 0; align-items: center; }
@media (min-width: 64rem) { .nx-sf-hero-in { grid-template-columns: minmax(0, 1fr) 23.5rem; gap: 3rem; } }
@media (min-width: 80rem) { .nx-sf-hero-in { grid-template-columns: minmax(0, 1fr) 25rem; gap: 4.5rem; padding-block: 3.5rem 3.25rem; } }
@media (max-width: 39.98rem) { .nx-sf-hero-in { padding-block: 2.25rem 2.5rem; gap: 1.75rem; } }
.nx-sf-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; min-width: 0; }
.nx-sf-eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; max-width: 100%; padding: .3125rem .75rem .3125rem .3125rem;
  border: 1px solid var(--nx-line-strong); border-radius: 999px; background: color-mix(in oklab, var(--card) 85%, transparent);
  font-size: .8125rem; font-weight: 500; color: var(--secondary-foreground); box-shadow: var(--nx-shadow);
}
.nx-sf-eyebrow b { font-weight: 600; color: var(--mono); }
.nx-sf-eyebrow .nx-store-mark { width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: .5625rem; box-shadow: none; }
.nx-sf-eyebrow .nx-sep { height: .75rem; }
@media (max-width: 39.98rem) { .nx-sf-eyebrow-domain { display: none !important; } .nx-sf-eyebrow { padding-inline-end: .875rem; } }
.nx-sf-hero h1 {
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.125rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; color: var(--mono);
  max-width: 17ch; text-wrap: balance;
}
.nx-sf-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--secondary-foreground); max-width: 38rem; text-wrap: pretty; }
@media (max-width: 39.98rem) { .nx-sf-lead { font-size: 1rem; } }
.nx-sf-cta { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .25rem; }
.nx-sf-cta .kt-btn { height: 2.75rem; padding-inline: 1.125rem; font-size: .9375rem; gap: .5rem; }
.nx-sf-cta .kt-btn i { font-size: 1.0625rem; }
@media (max-width: 39.98rem) { .nx-sf-cta { width: 100%; } .nx-sf-cta .kt-btn { flex: 1 1 10rem; justify-content: center; } }
.nx-sf-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.nx-sf-trust li { display: inline-flex; align-items: center; gap: .4375rem; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-sf-trust i { font-size: 1rem; color: var(--nx-ok-text); }
@media (max-width: 39.98rem) { .nx-sf-trust { flex-direction: column; gap: .5rem; } .nx-sf-trust li { align-items: flex-start; } .nx-sf-trust i { margin-top: .0625rem; } }

/* "At a glance": the old "Platform Status" box, with facts that are true for this store (no "Delivery speed: Instant") */
.nx-sf-glance { box-shadow: var(--nx-shadow-lg); overflow: hidden; }
.nx-sf-glance .kt-card-header { gap: .75rem; }
.nx-sf-glance-head { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.nx-sf-glance-head .kt-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sf-facts { display: flex; flex-direction: column; margin: 0; padding: .375rem 1.125rem; list-style: none; }
.nx-sf-fact { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--border); }
.nx-sf-fact:first-child { border-top: 0; }
.nx-sf-fact .nx-icon { margin-top: .0625rem; }
.nx-sf-fact > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.nx-sf-fact-label { font-size: .75rem; color: var(--secondary-foreground); }
.nx-sf-fact-value { display: block; margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--mono); text-wrap: pretty; }
.nx-sf-fact-value small { display: block; font-size: .75rem; font-weight: 400; color: var(--secondary-foreground); }
.nx-sf-glance .kt-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .875rem; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-sf-glance .kt-card-footer a { display: inline-flex; align-items: center; gap: .3125rem; font-weight: 500; color: var(--nx-link); }
.nx-sf-glance .kt-card-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-sf-glance .kt-card-footer a i { font-size: .9375rem; }

/* ============ 4. section heads + bands ============ */
.nx-sf-section { padding-block: 3.5rem; scroll-margin-top: 4rem; }
.nx-sf-section + .nx-sf-section { border-top: 1px solid var(--border); }
@media (max-width: 39.98rem) { .nx-sf-section { padding-block: 2.75rem; } }
/* alternate band: a quiet tint so long pages keep their rhythm without boxes inside boxes */
.nx-sf-band { background: color-mix(in oklab, var(--muted) 45%, var(--background)); }
.dark .nx-sf-band { background: color-mix(in oklab, var(--card) 70%, var(--background)); }
.nx-sf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 1.75rem; }
.nx-sf-head-text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; max-width: 44rem; }
.nx-sf-head h2 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; color: var(--mono); text-wrap: balance; }
.nx-sf-head p:not(.nx-label) { font-size: .9375rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-head-aside { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--secondary-foreground); }

/* ============ 5. tool cards ============ */
/* 1 column on phones, 2 from 640 px, 3 from 1024 px; equal heights, actions pinned to the bottom (the old Moz card sat 36 px higher) */
.nx-sf-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .nx-sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nx-sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.nx-sf-tool { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.nx-sf-tool:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--nx-line-strong)); box-shadow: var(--nx-shadow-lg); }
.nx-sf-tool-head { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.nx-sf-tool-head > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.nx-sf-tool-name { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--mono); }
.nx-sf-tool-name a { color: inherit; }
.nx-sf-tool-name a:hover { color: var(--nx-link); }
.nx-sf-tool-cat { font-size: .75rem; color: var(--secondary-foreground); }
.nx-sf-logo { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 10px; border: 1px solid var(--nx-line-strong); background: var(--card); overflow: hidden; }
.nx-sf-logo img { width: 100%; height: 100%; object-fit: contain; padding: .375rem; }
.dark .nx-sf-logo { background: #fff; }   /* brand logos are drawn for a light background (a black logo vanishes on dark) */
.nx-sf-tool .nx-tool-icon { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: 10px; font-size: .875rem; }
.nx-sf-pop { margin-inline-start: auto; align-self: center; }
.nx-sf-pop.kt-badge { gap: .3125rem; height: 1.5rem; padding-inline: .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 500; }
.nx-sf-pop i { font-size: .75rem; }
.nx-sf-tool-sum { flex: 1; font-size: .875rem; line-height: 1.55; color: var(--secondary-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-sf-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem; padding-top: .875rem; border-top: 1px dashed var(--border); }
.nx-sf-price b { font-size: 1.625rem; font-weight: 650; line-height: 1; letter-spacing: -.03em; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-sf-price span { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-sf-price small { flex-basis: 100%; margin-top: .25rem; font-size: .75rem; color: var(--muted-foreground); }
.nx-sf-tool-actions { display: flex; gap: .5rem; }
.nx-sf-tool-actions .kt-btn { height: 2.5rem; justify-content: center; }
.nx-sf-tool-actions .kt-btn-primary { flex: 1; }
.nx-sf-tool-actions .kt-btn-outline { flex: 0 0 auto; padding-inline: 1rem; }

/* the slot after the last card: ask for a tool. Shown only where it fills a row (2 or 3 columns), always on phones. The tile is the
   grid's (number of tools + 1)th child (the prototype counted Alpine's <template> too, hence +2 there). */
.nx-sf-ask { display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: 1.25rem; border: 1px dashed var(--nx-line-input); border-radius: 10px; background: color-mix(in oklab, var(--muted) 35%, transparent); min-width: 0; }
.nx-sf-ask b { font-size: .9375rem; font-weight: 600; color: var(--mono); }
.nx-sf-ask p { font-size: .8125rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-ask .kt-btn { align-self: flex-start; }
@media (min-width: 40rem) and (max-width: 63.98rem) { .nx-sf-ask:nth-child(2n+1) { display: none; } }
@media (min-width: 64rem) { .nx-sf-ask:nth-child(3n+1) { display: none; } }

/* empty catalogue (a live store with nothing to sell: was squeezed into one 288 px column) */
.nx-sf-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem 1.25rem; text-align: center; }
.nx-sf-empty h3 { font-size: 1.0625rem; font-weight: 600; color: var(--mono); }
.nx-sf-empty p { max-width: 30rem; font-size: .875rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-empty .nx-sf-chips { justify-content: center; }

/* ============ 6. steps, payment, support ============ */
/* four accurate steps (the old block said "three easy steps" above four cards and promised instant access) */
.nx-sf-steps { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: nx-sf-step; }
@media (min-width: 40rem) { .nx-sf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .nx-sf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.nx-sf-step { position: relative; counter-increment: nx-sf-step; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-sf-step::before {
  content: counter(nx-sf-step); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .375rem; border-radius: 9px;
  font: 600 .875rem/1 var(--nx-mono); color: #fff; background: var(--nx-store-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nx-sf-step h3 { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--mono); }
.nx-sf-step p { font-size: .8125rem; line-height: 1.6; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-step .nx-sf-step-icon { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; font-size: 1.375rem; color: var(--muted-foreground); opacity: .7; }

/* support: the store's own text + channel cards | common questions */
.nx-sf-support { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .nx-sf-support { grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.5rem; } }
@media (min-width: 80rem) { .nx-sf-support { grid-template-columns: minmax(0, 1fr) 26rem; } }
.nx-sf-contact .kt-card-content { display: flex; flex-direction: column; gap: 1.25rem; }
.nx-sf-from { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
/* channel rows: icon + name + the real number or handle, the action on the right (a long handle wraps under its name, never mid-button) */
.nx-sf-chans { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.nx-sf-chan { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .75rem .875rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); min-width: 0; transition: border-color .15s; }
.nx-sf-chan:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--nx-line-strong)); }
.nx-sf-chan-id { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 14rem; }
.nx-sf-chan-id > span:last-child { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.nx-sf-chan-id b { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-sf-chan-id small { font-family: var(--nx-mono); font-size: .75rem; color: var(--secondary-foreground); overflow-wrap: anywhere; }
.nx-sf-chan .kt-btn { justify-content: center; flex: 0 0 auto; min-width: 11.5rem; }
.nx-sf-chan .kt-btn i { font-size: .875rem; color: var(--muted-foreground); }
@media (max-width: 39.98rem) { .nx-sf-chan .kt-btn { flex: 1 1 100%; } }
.nx-sf-qa { margin: 0; padding: 0; list-style: none; }
.nx-sf-qa li { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.125rem; border-top: 1px solid var(--border); }
.nx-sf-qa li:first-child { border-top: 0; }
.nx-sf-qa li > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nx-sf-qa h3 { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--mono); }
.nx-sf-qa p { font-size: .8125rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ============ 7. tool page ============ */
.nx-sf-main { flex: 1 0 auto; padding-block: 1.5rem 4rem; flex-grow: 0; width: 100%; }
.nx-sf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-sf-crumbs a { color: var(--secondary-foreground); }
.nx-sf-crumbs a:hover { color: var(--mono); text-decoration: underline; text-underline-offset: 3px; }
.nx-sf-crumbs li { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.nx-sf-crumbs li + li::before { content: ""; width: .375rem; height: .375rem; border-top: 1.5px solid var(--muted-foreground); border-right: 1.5px solid var(--muted-foreground); transform: rotate(45deg); margin-inline: .125rem .25rem; opacity: .7; }
.nx-sf-crumbs [aria-current] { color: var(--mono); font-weight: 500; }
.nx-sf-product { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .nx-sf-product { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 2rem; } }
@media (min-width: 80rem) { .nx-sf-product { grid-template-columns: minmax(0, 1fr) 24rem; gap: 2.5rem; } }
.nx-sf-product-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.nx-sf-phead { display: flex; align-items: flex-start; gap: 1.25rem; }
.nx-sf-phead .nx-tool-icon, .nx-sf-phead .nx-sf-logo { width: 4.5rem; height: 4.5rem; flex: 0 0 4.5rem; border-radius: 16px; font-size: 1.375rem; }
.nx-sf-phead-text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding-top: .125rem; }
.nx-sf-phead h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; color: var(--mono); text-wrap: balance; }
.nx-sf-phead p { font-size: 1rem; line-height: 1.55; color: var(--secondary-foreground); max-width: 42rem; text-wrap: pretty; }
.nx-sf-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.nx-sf-badges .kt-badge { height: 1.5rem; gap: .3125rem; padding-inline: .5rem; border-radius: 999px; font-size: .75rem; font-weight: 500; }
@media (max-width: 39.98rem) {
  .nx-sf-phead { flex-direction: column; gap: 1rem; }
  .nx-sf-phead .nx-tool-icon, .nx-sf-phead .nx-sf-logo { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; border-radius: 12px; font-size: 1.0625rem; }
}
/* the description: the admin's rich text with real typography (it rendered as unstyled lines at 1200 px, H2) */
.nx-sf-desc .kt-card-content { padding: 1.5rem; }
.nx-sf-desc .nx-prose { font-size: .9375rem; line-height: 1.7; max-width: 68ch; }
.nx-sf-desc .nx-prose > p:first-child { font-size: 1.0625rem; line-height: 1.6; color: var(--mono); }
.nx-sf-desc .nx-prose h2, .nx-sf-desc .nx-prose h3 { font-size: 1rem; margin-top: 1.5em; }
.nx-sf-desc .nx-prose ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.nx-sf-desc .nx-prose ul > li { position: relative; padding-inline-start: 1.75rem; margin: 0; }
.nx-sf-desc .nx-prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .3125rem; width: 1.125rem; height: 1.125rem; border-radius: 999px;
  background: color-mix(in oklab, var(--nx-ok) 14%, var(--card));
  -webkit-mask: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ok) 30%, transparent);
}
.nx-sf-desc .nx-prose ul > li::after {
  content: ""; position: absolute; inset-inline-start: .375rem; top: .5625rem; width: .375rem; height: .5625rem;
  border-right: 2px solid var(--nx-ok-text); border-bottom: 2px solid var(--nx-ok-text); transform: rotate(45deg);
}
.nx-sf-desc .nx-prose ol { padding-inline-start: 1.375rem; }
.nx-sf-desc .nx-prose ol > li { padding-inline-start: .25rem; }
.nx-sf-desc .nx-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.nx-sf-desc .nx-prose th, .nx-sf-desc .nx-prose td { padding: .5rem .625rem; border: 1px solid var(--border); text-align: start; }
.nx-sf-desc .nx-prose hr { border: 0; border-top: 1px solid var(--border); }
.nx-sf-desc .nx-prose pre { padding: .75rem 1rem; border-radius: 8px; background: var(--muted); overflow-x: auto; font-family: var(--nx-mono); font-size: .8125rem; }

/* the buy card: price, plan picker (price x months, the live rule), total, Buy now */
.nx-sf-buy { position: relative; overflow: hidden; box-shadow: var(--nx-shadow-lg); }
@media (min-width: 64rem) { .nx-sf-buy-wrap { position: sticky; top: 5.25rem; } }
.nx-sf-buy-price { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem 1.25rem 0; }
.nx-sf-buy-price > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; }
.nx-sf-buy-price > div > span { white-space: nowrap; }   /* "/ month" (or "USD / month") stays whole; a local price's "(18.00 USD)" wraps under it */
.nx-sf-buy-price b { font-size: 2.25rem; font-weight: 650; line-height: 1; letter-spacing: -.035em; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-sf-buy-price span { font-size: .875rem; color: var(--secondary-foreground); }
.nx-sf-buy-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.nx-sf-buy .nx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-sf-buy .nx-plan { padding: .625rem .75rem; }
.nx-sf-buy legend { margin-bottom: .5rem; }
.nx-sf-total { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-top: .875rem; border-top: 1px solid var(--border); }
.nx-sf-total span { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-sf-total b { font-size: 1.25rem; font-weight: 650; color: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.nx-sf-buy .nx-sf-buy-go { height: 2.875rem; width: 100%; justify-content: center; font-size: .9375rem; font-weight: 600; gap: .5rem; }
.nx-sf-buy-notes { display: flex; flex-direction: column; gap: .625rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
.nx-sf-buy-notes .nx-note { font-size: .8125rem; }
.nx-sf-buy-notes .nx-note > i { font-size: 1rem; color: var(--nx-ok-text); }
.nx-sf-back { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; font-size: .8125rem; font-weight: 500; color: var(--secondary-foreground); }
.nx-sf-back:hover { color: var(--mono); }
.nx-sf-back i { font-size: .875rem; }

/* how access works (tool page): numbered rows */
.nx-sf-access { margin: 0; padding: 0; list-style: none; counter-reset: nx-sf-acc; }
.nx-sf-access li { counter-increment: nx-sf-acc; display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 0; border-top: 1px solid var(--border); }
.nx-sf-access li:first-child { border-top: 0; padding-top: 0; }
.nx-sf-access li:last-child { padding-bottom: 0; }
.nx-sf-access li::before { content: counter(nx-sf-acc); display: grid; place-items: center; flex: 0 0 1.75rem; height: 1.75rem; border-radius: 8px; font: 600 .8125rem/1 var(--nx-mono); color: #fff; background: var(--nx-store-grad); }
.nx-sf-access li > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.nx-sf-access b { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-sf-access span { font-size: .8125rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }

/* phones + tablets: the price and Buy now stay on screen (M4: no sticky CTA) */
.nx-sf-buybar { display: none; }
@media (max-width: 63.98rem) {
  .nx-sf-buybar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: .75rem;
    padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--nx-line-strong);
    background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px -16px rgba(9, 9, 11, .35); transition: transform .2s;
  }
  .nx-sf-buybar.is-hidden { transform: translateY(110%); }
  body.has-buybar { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .nx-sf-buybar { transition: none; } }
.nx-sf-buybar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.nx-sf-buybar-text b { font-size: 1rem; font-weight: 650; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-sf-buybar-text small { font-size: .75rem; color: var(--secondary-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sf-buybar .kt-btn { height: 2.75rem; padding-inline: 1.25rem; font-weight: 600; }

/* other tools from this store (cross-sell) */
.nx-sf-others { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .nx-sf-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .nx-sf-others { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.nx-sf-other { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .875rem 1rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); box-shadow: var(--nx-shadow); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.nx-sf-other:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--nx-line-strong)); box-shadow: var(--nx-shadow-lg); }
.nx-sf-other > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-sf-other b { font-size: .875rem; font-weight: 600; color: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sf-other small { font-size: .75rem; color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
.nx-sf-other > i { font-size: .875rem; color: var(--muted-foreground); }
/* the initials tile takes the logo's 48 px slot, as on the catalogue cards: a tool without a logo, or one whose logo fails to load and turns
   into its initials (task 795), keeps the card's height */
.nx-sf-other > .nx-tool-icon { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: 10px; font-size: .875rem; }
.nx-sf-other:hover > i { color: var(--nx-link); }
.nx-sf-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 3rem 0 1rem; }
.nx-sf-subhead h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; color: var(--mono); }

/* tool not sold / not found: in the store's own page, with the catalogue (was a white Metronic 404) */
.nx-sf-gone { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 3rem 1.25rem 2.75rem; text-align: center; }
.nx-sf-gone h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; color: var(--mono); text-wrap: balance; }
.nx-sf-gone p { max-width: 32rem; font-size: .9375rem; line-height: 1.55; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-gone .nx-tool-icon { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; border-radius: 12px; font-size: 1.0625rem; opacity: .7; }
/* the tool's logo over its initials (nx/tool-tile, task 795): the plate stays white in dark mode too, only the logo is muted */
.nx-sf-gone .nx-tool-icon:has(> .nx-tool-logo) { opacity: 1; }
.nx-sf-gone .nx-tool-icon > .nx-tool-logo { opacity: .7; }

/* ============ 8. floating chat, footer ============ */
/* the store's WhatsApp / Telegram, kept from the old page, but only where the gutter can hold it (it covered prices and headings) */
.nx-sf-float { position: fixed; inset-inline-end: 1.5rem; bottom: 1.5rem; z-index: 30; display: none; flex-direction: column; gap: .625rem; }
@media (min-width: 85rem) { .nx-sf-float { display: flex; } }
.nx-sf-float a {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; border: 1px solid var(--nx-line-strong);
  background: var(--card); box-shadow: var(--nx-shadow-lg); transition: transform .15s, border-color .15s;
}
.nx-sf-float a:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--primary) 35%, var(--nx-line-strong)); }
.nx-sf-float a i { font-size: 1.375rem; }
.nx-sf-float a.is-whatsapp i { color: #16a34a; }
.nx-sf-float a.is-telegram i { color: #0284c7; }
.dark .nx-sf-float a.is-whatsapp i { color: #4ade80; }
.dark .nx-sf-float a.is-telegram i { color: #38bdf8; }
@media (prefers-reduced-motion: reduce) { .nx-sf-float a { transition: none; } .nx-sf-float a:hover { transform: none; } }

.nx-sf-footer { border-top: 1px solid var(--nx-line-strong); background: var(--card); }
.nx-sf-footer-grid { display: grid; gap: 2rem; padding-block: 3rem 2rem; flex-grow: 0; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 39.98rem) { .nx-sf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; } .nx-sf-footer-brand, .nx-sf-footer-grid > .nx-sf-footer-col:last-child { grid-column: 1 / -1; } }
@media (min-width: 40rem) { .nx-sf-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-sf-footer-brand { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .nx-sf-footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; } .nx-sf-footer-brand { grid-column: auto; } }
.nx-sf-footer-brand { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.nx-sf-footer-brand p { max-width: 24rem; font-size: .8125rem; line-height: 1.6; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-sf-footer-col { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.nx-sf-footer-col h2 { margin-bottom: .25rem; }
.nx-sf-footer-col a { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; max-width: 100%; font-size: .875rem; color: var(--secondary-foreground); }
.nx-sf-footer-col a:hover { color: var(--mono); }
.nx-sf-footer-col a i { font-size: 1rem; color: var(--muted-foreground); }
.nx-sf-footer-col a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sf-footer-end { flex-grow: 0; }
.nx-sf-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: 1.25rem; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--muted-foreground); }
/* the legal pages (themes::_shared.legal-links, task 540) */
.nx-sf-legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px .5rem; }
.nx-sf-legal-links a { display: inline-flex; align-items: center; color: var(--secondary-foreground); text-decoration: none; }
@media (max-width: 47.98rem) { .nx-sf-legal-links a { min-height: 2.5rem; } }
.nx-sf-legal-links > span { opacity: .6; }
.nx-sf-legal-links a:hover, .nx-sf-legal-links a[aria-current="page"] { color: var(--mono); text-decoration: underline; text-underline-offset: 3px; }

/* ============ 9. runtime without Alpine ============ */
/* the menu button and the theme switch render both glyphs; the state shows one (correct on the first paint, no script needed for
   the theme: html.dark is set in <head>). nox-customer.css hides .nx-theme-ic-sun / .nx-theme-ic-moon the same way. */
.nx-sf-menu-btn .nx-sf-ic-close, .nx-sf-menu-btn[aria-expanded="true"] .nx-sf-ic-open { display: none; }
.nx-sf-menu-btn[aria-expanded="true"] .nx-sf-ic-close { display: inline-block; }
html:not(.dark) .nx-sf-theme-dark, html.dark .nx-sf-theme-light { display: none; }
.nx-sf-menu[hidden] { display: none !important; }
.nx-sf-menu.is-entering { animation: nx-sf-fade .15s ease-out; }
@keyframes nx-sf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nx-sf-menu.is-entering { animation: none; } }
/* the buy bar is only for a tool the store sells (the prototype's x-show) */
.nx-sf-buybar[hidden] { display: none !important; }