:root {
  color-scheme: light;
  --paper: #f4f6f8;
  --white: #ffffff;
  --ink: #14263f;
  --muted: #56677c;
  --line: #d8e0e8;
  --lime: #d3f35b;
  --coral: #f16f4b;
  --teal: #1554d1;
  --blue: #1554d1;
  --radius: 8px;
  --display: "Rubik", "Trebuchet MS", sans-serif;
  --body: "Nunito Sans", "Segoe UI", sans-serif;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

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

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

button, a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  height: 82px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 19px/1 var(--display);
  letter-spacing: 0;
  flex-shrink: 0;
}

.wordmark-light {
  color: #75849a;
  font-weight: 500;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px 9px 9px 2px;
  background: var(--blue);
  color: #fff;
  font: 800 17px/1 var(--display);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #47564f;
  font-size: 14px;
  flex-wrap: wrap;
}

.main-nav a, .nav-link {
  transition: color 160ms ease;
  padding: 6px 0;
}

.main-nav a:hover, .nav-link:hover {
  color: var(--coral);
}

.nav-form {
  margin: 0;
  display: inline-flex;
}

.nav-link {
  color: inherit;
  background: none;
  border: 0;
  padding: 6px 0;
}

.nav-signup {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--blue);
  color: white !important;
  border-radius: 6px;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.nav-signup:hover {
  background: #1046b3;
  transform: translateY(-1px);
}

.nav-signup span {
  padding-left: 8px;
  color: var(--lime);
}

.flash-stack {
  width: min(100% - 32px, 900px);
  margin: 0 auto;
  padding-top: 14px;
}

.flash {
  padding: 12px 16px;
  border-radius: 6px;
  background: #e7f3ca;
  color: #304716;
  font-size: 14px;
  margin-bottom: 8px;
}

.flash-error {
  background: #fae5de;
  color: #7e3023;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  max-width: 1120px;
  min-height: 480px;
  margin: 0 auto;
  padding: 80px 8.3% 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
}

.live-dot, .stock-label i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--coral);
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}

.hero h1 {
  max-width: 780px;
  margin: 0 auto;
  font: 800 clamp(32px, 5.5vw, 68px)/1.08 var(--display);
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}

.hero h1 span {
  color: var(--blue);
}

.hero-description {
  max-width: 580px;
  margin: 20px auto 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.button:hover {
  transform: translateY(-2px);
}

.button-dark {
  background: var(--blue);
  color: white;
}

.button-dark span {
  color: var(--lime);
  font-size: 18px;
}

.button-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.button-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 560px;
  margin: 36px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.hero-proof strong {
  color: var(--ink);
  font-size: 13px;
}

.proof-stamp {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: var(--lime);
  border-radius: 50%;
  font-weight: 800;
  flex-shrink: 0;
}

.proof-rule {
  height: 24px;
  width: 1px;
  margin: 0 4px;
  background: var(--line);
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ==========================================================================
   Catalog & Sections
   ========================================================================== */
.testimonial-section,
.faq-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 8.3% 40px;
  width: 100%;
}

.catalog-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 8.3% 76px;
  background: var(--white);
  width: 100%;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-heading h2, .how-title h2 {
  margin: 0;
  font: 800 clamp(26px, 3.5vw, 36px)/1.15 var(--display);
}

.section-heading .eyebrow {
  margin-bottom: 8px;
}

.section-heading > p {
  max-width: 340px;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 13px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: #9db7ed;
  box-shadow: 0 12px 28px rgba(20,50,100,.09);
}

.product-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  object-fit: cover;
  border-radius: 6px;
  background: #e7ece3;
}

.product-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.product-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px 9px 9px 2px;
  font: 800 17px var(--display);
}

.symbol-0 { background: #d9f16e; color: #283522; }
.symbol-1 { background: #f8d5c9; color: #723d2e; }
.symbol-2 { background: #cce8e1; color: #24594f; }

.stock-label {
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.stock-label i {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  background: #5caa78;
}

.stock-empty {
  color: #8a6258;
}

.stock-empty i {
  background: var(--coral);
}

.product-copy {
  margin-top: 16px;
}

.product-copy h2, .product-copy h3 {
  margin: 0;
  font: 700 17px/1.35 var(--display);
}

.product-copy p {
  min-height: 38px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.price-label {
  display: block;
  margin-bottom: 2px;
  color: #69776f;
  font-size: 10px;
}

.product-bottom strong {
  font: 800 19px var(--display);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9px 9px 9px 2px;
  background: var(--lime);
  color: var(--ink);
  font-size: 20px;
  transition: background 160ms ease, transform 160ms ease;
  flex-shrink: 0;
}

.icon-button:hover {
  background: #c4e34e;
  transform: rotate(4deg);
}

.button-disabled {
  background: #e8ebe4;
  color: #67736c;
  cursor: not-allowed;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed #cbd4c9;
  border-radius: var(--radius);
}

.empty-symbol {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime);
  font-size: 22px;
}

.empty-state h2, .empty-state h3 {
  margin: 14px 0 6px;
  font: 700 19px var(--display);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ==========================================================================
   How it Works & FAQ & Testimonials
   ========================================================================== */
.how-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 8.3% 76px;
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 7%;
  width: 100%;
}

.how-title .eyebrow {
  margin-bottom: 10px;
}

.how-title h2 {
  font-size: clamp(26px, 3vw, 34px);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 6px;
}

.how-steps article {
  padding-top: 10px;
  border-top: 2px solid var(--teal);
}

.step-number {
  color: var(--coral);
  font: 800 12px var(--display);
}

.how-steps h3 {
  margin: 14px 0 6px;
  font: 700 15px var(--display);
}

.how-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.testimonial-card {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.testimonial-stars {
  margin-bottom: 14px;
  font-size: 17px;
  letter-spacing: 2px;
  color: #f4b942;
}

.testimonial-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.testimonial-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 12px;
}

.testimonial-meta strong {
  color: var(--ink);
}

.testimonial-meta span {
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.closing-band {
  min-height: 86px;
  padding: 20px max(8.3%, calc((100% - 1100px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--blue);
  color: #fff;
  width: 100%;
}

.closing-band p {
  margin: 0;
  font: 700 18px var(--display);
}

.closing-band a {
  font-size: 14px;
  font-weight: 700;
}

.closing-band a span {
  padding-left: 8px;
  color: var(--lime);
}

.site-footer {
  max-width: 1320px;
  min-height: 90px;
  margin: 0 auto;
  padding: 24px 42px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #59685f;
  font-size: 12px;
  width: 100%;
}

.footer-mark {
  color: var(--ink);
  font-size: 15px;
}

.footer-mark .brand-mark {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.site-footer p {
  margin: 0;
}

.footer-note {
  margin-left: auto;
}

/* ==========================================================================
   Marketplace Dark Theme Page
   ========================================================================== */
body.marketplace-page {
  min-height: 100vh;
  background: #0b111d;
  color: #eef3fb;
}

body.marketplace-page .site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  width: 100%;
  max-width: none;
  height: 68px;
  padding: 0 max(22px, calc((100% - 1260px) / 2));
  border-bottom: 1px solid #202b3d;
  background: rgba(16, 26, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.marketplace-page .brand-mark {
  background: var(--lime);
  color: #111a2a;
}

body.marketplace-page .wordmark-light {
  color: #a8b6c9;
}

body.marketplace-page .main-nav {
  color: #c2ccda;
}

body.marketplace-page .main-nav a:hover,
body.marketplace-page .nav-link:hover {
  color: var(--lime);
}

body.marketplace-page .nav-signup {
  background: #3158e8;
  color: #fff !important;
}

body.marketplace-page .testimonial-section,
body.marketplace-page .faq-section {
  padding: 0 28px 36px;
}

body.marketplace-page .testimonial-card,
body.marketplace-page .faq-item {
  border-color: #29364a;
  background: #121d2f;
}

body.marketplace-page .testimonial-meta strong,
body.marketplace-page .faq-item summary {
  color: #f0f4fa;
}

body.marketplace-page .testimonial-card p,
body.marketplace-page .faq-item p,
body.marketplace-page .testimonial-meta span {
  color: #a0aec0;
}

body.marketplace-page .catalog-section {
  width: min(100%, 1320px);
  min-height: 60vh;
  padding: 36px 28px 68px;
  background: transparent;
}

.marketplace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.marketplace-heading .eyebrow {
  margin: 0 0 4px;
  color: var(--lime);
}

.marketplace-heading h2 {
  margin: 0;
  font: 700 clamp(22px, 2.5vw, 28px)/1.2 var(--display);
}

.catalog-more {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  color: #b9c7d8;
  font-size: 13px;
  font-weight: 700;
}

.catalog-more span {
  color: var(--lime);
  font-size: 16px;
}

.catalog-caption {
  margin: 6px 0 20px;
  color: #96a5b9;
  font-size: 13px;
}

.catalog-controls {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.catalog-search {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #2a394f;
  border-radius: 8px;
  background: #141f30;
  color: #9aacbf;
}

.catalog-search > span:first-child {
  color: var(--lime);
  font-size: 18px;
  line-height: 1;
}

.catalog-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eff5fc;
  font: 500 13px var(--body);
}

.catalog-search input::placeholder {
  color: #8695aa;
}

.catalog-search:focus-within {
  border-color: #7f9fff;
  box-shadow: 0 0 0 2px rgba(87,126,255,.2);
}

.catalog-search button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c6d2e0;
  font-size: 18px;
  display: grid;
  place-items: center;
}

.catalog-search button:hover {
  background: #27364b;
}

.category-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #2a394f;
  border-radius: 7px;
  background: #141f30;
  color: #b7c5d7;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.category-chip:hover {
  border-color: #61769a;
  color: #fff;
}

.category-chip[aria-pressed="true"] {
  border-color: var(--lime);
  background: var(--lime);
  color: #172033;
}

.catalog-count {
  margin: 0;
  color: #91a0b4;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.catalog-no-results {
  margin-top: 20px;
}

.catalog-no-results h2 {
  margin: 12px 0 5px;
  font: 700 17px var(--display);
}

.catalog-reset {
  min-height: 42px;
  margin-top: 15px;
  padding: 0 18px;
  border: 1px solid #556b8a;
  border-radius: 6px;
  background: transparent;
  color: #e7effa;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.catalog-reset:hover {
  border-color: var(--lime);
  color: var(--lime);
}

body.marketplace-page .product-card[hidden] {
  display: none;
}

body.marketplace-page .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.marketplace-page .product-card {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
  border-color: #29364a;
  background: #141f30;
  border-radius: 10px;
}

body.marketplace-page .product-card:hover {
  border-color: #536d9b;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

body.marketplace-page .product-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: 7px;
  background: #1c2b40;
}

body.marketplace-page .product-photo:not(img) {
  display: block;
}

.product-art {
  padding: 12px;
  isolation: isolate;
  background-color: #18263a;
  background-image: linear-gradient(135deg, rgba(28,105,245,.25), transparent 54%), repeating-linear-gradient(0deg, transparent 0 20px, rgba(172,203,255,.08) 21px 22px), repeating-linear-gradient(90deg, transparent 0 20px, rgba(172,203,255,.08) 21px 22px);
}

.product-art::before {
  position: absolute;
  z-index: -1;
  inset: 27% 9% 19%;
  border: 1px solid rgba(102,169,255,.5);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(23,91,191,.62), rgba(10,18,33,.94));
  content: "";
  transform: rotate(-4deg);
}

.product-art-1 {
  background-color: #111c2e;
  background-image: radial-gradient(ellipse at 75% 28%, rgba(50,222,207,.23), transparent 35%), repeating-linear-gradient(135deg, transparent 0 9px, rgba(137,173,220,.07) 10px 11px);
}

.product-art-1::before {
  inset: 26% 8% 17%;
  border-color: rgba(45,212,191,.45);
  background: linear-gradient(145deg, rgba(15,72,94,.9), rgba(8,19,34,.96));
  transform: rotate(4deg);
}

.product-art-2 {
  background-color: #101e35;
  background-image: linear-gradient(160deg, rgba(0,116,255,.4), transparent 55%), repeating-linear-gradient(90deg, transparent 0 13px, rgba(98,173,255,.2) 14px 15px);
}

.product-art-2::before {
  inset: 25% 11% 17%;
  border-color: rgba(74,152,255,.56);
  background: linear-gradient(145deg, rgba(17,64,128,.9), rgba(7,16,32,.97));
  transform: rotate(-2deg);
}

.product-art-3 {
  background-color: #211a39;
  background-image: radial-gradient(ellipse at 70% 25%, rgba(244,73,181,.2), transparent 42%), linear-gradient(140deg, rgba(50,68,189,.26), transparent);
}

.product-art-3::before {
  inset: 27% 8% 17%;
  border-color: rgba(181,117,255,.48);
  background: linear-gradient(145deg, rgba(62,41,130,.82), rgba(10,17,34,.96));
  transform: rotate(3deg);
}

.art-brand {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  color: #dceaff;
  font: 700 8px/1.2 var(--display);
}

.art-brand i {
  color: var(--lime);
  font-size: 7px;
  font-style: normal;
}

.product-art > strong {
  position: absolute;
  right: 12px;
  bottom: 28%;
  left: 12px;
  color: #fff;
  font: 700 clamp(11px, 1.2vw, 15px)/1.15 var(--display);
  text-shadow: 0 2px 8px #07101d;
}

.art-orbit {
  position: absolute;
  z-index: -1;
  top: 28%;
  left: 23%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgba(121,190,255,.57);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(21,108,240,.34), inset 0 0 20px rgba(21,108,240,.2);
}

.product-art-1 .art-orbit {
  border-color: rgba(54,232,204,.65);
  box-shadow: 0 0 24px rgba(21,220,197,.23), inset 0 0 20px rgba(21,220,197,.18);
}

.product-art-3 .art-orbit {
  border-color: rgba(209,129,255,.6);
  box-shadow: 0 0 25px rgba(165,91,255,.28), inset 0 0 20px rgba(165,91,255,.18);
}

.art-bars {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  height: 15%;
  align-items: flex-end;
  gap: 3px;
  opacity: .8;
}

.art-bars i {
  flex: 1;
  height: 45%;
  border-top: 1px solid #62aaff;
  background: linear-gradient(0deg, rgba(41,126,255,.35), transparent);
}

.art-bars i:nth-child(2n) { height: 72%; }
.art-bars i:nth-child(3n) { height: 100%; }

body.marketplace-page .product-top {
  min-height: 24px;
  gap: 8px;
}

.store-chip {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #d8e1ed;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.store-avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: #3158e8;
  color: white;
  font: 700 10px var(--display);
}

body.marketplace-page .stock-label {
  color: #a4e179;
  font-size: 10px;
  white-space: nowrap;
}

body.marketplace-page .stock-label i {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background: #9cdf67;
}

body.marketplace-page .stock-empty {
  color: #d4a47c;
}

body.marketplace-page .stock-empty i {
  background: #e99051;
}

body.marketplace-page .product-copy {
  min-width: 0;
  margin-top: 10px;
}

body.marketplace-page .product-copy h2 {
  min-height: 2.2em;
  margin: 0;
  overflow-wrap: anywhere;
  color: #f0f4fa;
  font: 600 14px/1.25 var(--display);
}

body.marketplace-page .product-copy p {
  display: -webkit-box;
  min-height: 0;
  margin: 6px 0 0;
  overflow: hidden;
  color: #a0aec0;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.marketplace-page .product-bottom {
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #26354a;
}

body.marketplace-page .product-bottom strong {
  color: #9bb8ff;
  font: 700 16px var(--display);
}

body.marketplace-page .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #3158e8;
  color: #fff;
  display: grid;
  place-items: center;
}

body.marketplace-page .icon-button:hover {
  background: #4269f1;
  transform: translateY(-1px);
}

body.marketplace-page .button-disabled {
  background: #263244;
  color: #9aa7b7;
}

body.marketplace-page .how-section {
  border-top: 1px solid #202b3d;
  color: #eef3fb;
}

body.marketplace-page .how-steps p,
body.marketplace-page .section-heading > p {
  color: #a0aec0;
}

body.marketplace-page .how-steps article {
  border-color: var(--lime);
}

body.marketplace-page .how-steps h3 {
  color: #f0f4fa;
}

body.marketplace-page .closing-band {
  background: #14243a;
  border-top: 1px solid #26364c;
}

body.marketplace-page .site-footer {
  color: #a0aec0;
}

body.marketplace-page .footer-mark {
  color: #eef3fb;
}

body.marketplace-page .footer-mark .wordmark-light {
  color: #a0aec0;
}

body.marketplace-page .empty-state {
  border-color: #344359;
  color: #eef3fb;
}

body.marketplace-page .empty-state p {
  color: #a0aec0;
}

body.marketplace-page .product-title-link {
  color: inherit;
}

body.marketplace-page .product-title-link:hover {
  color: var(--lime);
}

body.marketplace-page .product-detail-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #a9c0f8;
  font-size: 11px;
  font-weight: 700;
}

body.marketplace-page .product-detail-link:hover {
  color: var(--lime);
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */
body.marketplace-page .product-detail-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 36px 28px 78px;
}

body.marketplace-page .product-back-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-bottom: 18px;
  color: #b8c6d8;
  font-size: 13px;
  font-weight: 700;
}

body.marketplace-page .product-back-link:hover {
  color: var(--lime);
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.product-detail-media {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2b3a50;
  border-radius: 10px;
  background: #141f30;
}

.product-detail-media > img,
.product-detail-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  object-fit: cover;
}

.product-detail-art > strong {
  font-size: clamp(20px, 2.5vw, 32px);
}

.product-detail-copy {
  min-width: 0;
  padding: 6px 0;
}

.product-category-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
}

.product-category-label span {
  padding-left: 9px;
  border-left: 1px solid #40516a;
  color: #9aabc0;
  font-weight: 500;
}

.product-detail-copy h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font: 700 clamp(24px, 3.2vw, 38px)/1.15 var(--display);
}

.product-detail-description {
  margin: 14px 0 18px;
  color: #adbbce;
  font-size: 15px;
  line-height: 1.65;
}

.product-detail-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a4e179;
  font-size: 13px;
  font-weight: 700;
}

.product-detail-stock i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9cdf67;
}

.product-detail-stock.is-unavailable {
  color: #e3a77e;
}

.product-detail-stock.is-unavailable i {
  background: #e99051;
}

.product-detail-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid #29384d;
  border-bottom: 1px solid #29384d;
  color: #a7b5c8;
  font-size: 13px;
}

.product-detail-price strong {
  color: #b7cbff;
  font: 700 clamp(22px, 2.5vw, 28px) var(--display);
}

.product-detail-copy form,
.product-detail-copy > .button {
  width: 100%;
}

.product-detail-copy form .button {
  width: 100%;
}

.product-trust-panel {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #2c4471;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(21,84,209,0.12), rgba(19,31,49,0.64));
}

.trust-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-panel-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(154, 223, 103, 0.2);
  color: var(--lime);
  font-weight: 800;
  flex-shrink: 0;
}

.trust-panel-head strong,
.trust-panel-head small {
  display: block;
}

.trust-panel-head strong {
  color: #f0f4fa;
  font: 600 14px var(--display);
}

.trust-panel-head small {
  margin-top: 3px;
  color: #a8b7cb;
  font-size: 11px;
}

.trust-panel-points {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #d7e4f4;
  font-size: 12px;
  line-height: 1.7;
}

.trust-panel-points li + li {
  margin-top: 3px;
}

.purchase-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--lime);
  background: #131f31;
  border-radius: 0 8px 8px 0;
}

.purchase-note strong {
  color: #f0f4fa;
  font: 600 13px var(--display);
}

.purchase-note p {
  margin: 6px 0 0;
  color: #a8b7cb;
  font-size: 13px;
  line-height: 1.55;
}

.product-information {
  display: grid;
  grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr);
  gap: 28px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #26364c;
}

.product-information .eyebrow {
  margin-bottom: 6px;
  color: var(--lime);
}

.product-information h2 {
  margin: 0;
  color: #f0f4fa;
  font: 600 20px/1.25 var(--display);
}

.product-extra-details,
.product-details-empty {
  margin: 0;
  color: #adbbce;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-line;
}

.product-details-empty {
  max-width: 560px;
}

.product-reviews {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #26364c;
}

.reviews-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.reviews-heading .eyebrow {
  margin-bottom: 6px;
  color: var(--lime);
}

.reviews-heading h2 {
  margin: 0;
  color: #f0f4fa;
  font: 600 20px var(--display);
}

.review-rating-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #a7b5c8;
  font-size: 12px;
  white-space: nowrap;
}

.review-rating-summary strong {
  color: var(--lime);
  font: 700 22px var(--display);
}

.review-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  max-width: 640px;
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid #29384d;
  border-radius: 8px;
  background: #121e2e;
}

.review-form label {
  margin: 0;
  color: #b3c2d5;
  font-size: 12px;
  font-weight: 700;
}

.review-form select,
.review-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #33445b;
  border-radius: 6px;
  background: #0d1725;
  color: #eff5fc;
  font: 14px/1.5 var(--body);
}

.review-form textarea {
  grid-column: 2;
  resize: vertical;
}

.review-form .button {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
}

.review-eligibility-note {
  margin: 0 0 22px;
  color: #a8b7cb;
  font-size: 13px;
}

.review-eligibility-note a {
  color: var(--lime);
  font-weight: 700;
}

.review-list {
  border-top: 1px solid #26364c;
}

.review-item {
  padding: 16px 2px;
  border-bottom: 1px solid #26364c;
}

.review-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-item-head strong {
  color: var(--lime);
  font: 700 14px var(--display);
}

.review-item-head span {
  color: #95a5ba;
  font-size: 11px;
}

.review-item > p,
.review-empty {
  margin: 8px 0 0;
  color: #d0d9e5;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.review-empty {
  color: #a8b7cb;
}

/* ==========================================================================
   Testimonial Refresh Cards
   ========================================================================== */
body.marketplace-page .testimonial-section {
  padding: 72px 28px 84px;
}

.testimonial-section .section-heading {
  align-items: flex-end;
  margin-bottom: 32px;
}

.testimonial-section .section-heading > p {
  max-width: 360px;
  margin-bottom: 3px;
}

.testimonial-grid {
  gap: 18px;
}

.testimonial-card {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #273752;
  border-radius: 16px;
  background: linear-gradient(145deg, #142139 0%, #101a2b 100%);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 86px;
  height: 86px;
  border-radius: 0 0 0 100%;
  background: rgba(211,243,91,.08);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: #46618d;
  box-shadow: 0 24px 48px rgba(0,0,0,.24);
}

.testimonial-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--lime);
  color: #172033;
  font: 800 15px var(--display);
}

.testimonial-avatar.avatar-coral { background: #ff9a78; }
.testimonial-avatar.avatar-teal { background: #70e0d0; }

.testimonial-stars {
  margin: 0;
  color: var(--lime);
  font-size: 14px;
  letter-spacing: 2px;
}

.testimonial-card blockquote {
  position: relative;
  margin: 22px 0 20px;
  color: #d7e0ed;
  font-size: 14px;
  line-height: 1.7;
}

.testimonial-card blockquote::before {
  content: "“";
  display: block;
  height: 20px;
  color: var(--coral);
  font: 800 32px/.8 var(--display);
}

.testimonial-meta {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #2d3b52;
}

.testimonial-meta strong {
  color: #f3f7fc;
  font-size: 13px;
}

.testimonial-meta span {
  color: #8798b0;
  font-size: 11px;
  text-align: right;
}

/* ==========================================================================
   Auth Page (Login & Register)
   ========================================================================== */
.auth-page {
  min-height: 100vh;
  background: #fff;
  font-family: var(--body);
}

.auth-page .site-header,
.auth-page .site-footer {
  display: none;
}

.auth-stage {
  min-height: 100vh;
  padding: 36px 20px;
  display: grid;
  place-items: center;
  width: 100%;
}

.auth-shell {
  position: relative;
  width: min(100%, 1080px);
  height: min(720px, calc(100vh - 60px));
  min-height: min(640px, calc(100vh - 60px));
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
}

.auth-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 48%;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
  transition: 1.8s ease-in-out;
}

.auth-shell.is-signup::before {
  right: 52%;
  transform: translate(100%, -50%);
}

.auth-forms {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.auth-form {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  padding: 40px clamp(30px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 450ms ease, transform 700ms cubic-bezier(.2,.75,.2,1);
}

.auth-signup {
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8%);
}

.auth-shell.is-signup .auth-signin {
  opacity: 0;
  pointer-events: none;
  transform: translateX(8%);
}

.auth-shell.is-signup .auth-signup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.auth-emblem {
  display: none;
}

.auth-form .eyebrow {
  margin: 0 0 7px;
  color: var(--blue);
}

.auth-form h1 {
  margin: 0;
  color: #24364e;
  font: 700 clamp(24px, 3vw, 34px)/1.2 var(--display);
  text-align: center;
}

.auth-intro {
  margin: 8px 0 20px;
  color: #777;
  font-size: 13px;
  text-align: center;
}

.auth-field {
  display: block;
  width: min(380px, 100%);
  margin: 0 0 14px;
  color: #454545;
  font-size: 12px;
  font-weight: 600;
}

.auth-field small {
  margin-left: 4px;
  color: #777;
  font-size: 11px;
  font-weight: 400;
}

.auth-input-wrap {
  min-height: 52px;
  margin-top: 6px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #e0e0e0;
  border-radius: 52px;
  background: #f7f7f7;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.auth-input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21,84,209,.2);
}

.auth-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font: 600 15px var(--body);
}

.auth-input-wrap input::placeholder {
  color: #929292;
}

.field-icon {
  width: 20px;
  flex: 0 0 20px;
  color: #9b9b9b;
  font: 600 17px var(--body);
  text-align: center;
}

.lock-icon {
  position: relative;
  height: 19px;
}

.lock-icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 9px;
  height: 9px;
  border: 1.5px solid #999;
  border-radius: 6px 6px 0 0;
}

.lock-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 13px;
  height: 10px;
  border-radius: 2px;
  background: #999;
}

.auth-submit {
  width: min(200px, 100%);
  min-height: 48px;
  margin-top: 10px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font: 700 14px var(--body);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.auth-submit span {
  display: inline-block;
  margin-left: 6px;
}

.auth-submit:hover {
  transform: translateY(-1px);
  background: #1047b4;
}

.auth-mobile-toggle {
  display: none;
}

.auth-panels {
  position: absolute;
  z-index: 2;
  inset: 0 50% 0 0;
  overflow: hidden;
  background: transparent;
  color: white;
  transition: transform 800ms ease-in-out;
}

.auth-panels::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -93%;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
}

.auth-shell.is-signup .auth-panels {
  transform: translateX(100%);
}

.auth-panel-copy {
  position: absolute;
  inset: 0;
  padding: 38px 12% 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 250ms ease, transform 500ms ease;
}

.panel-for-signup {
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
}

.auth-shell.is-signup .panel-for-signin {
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
}

.auth-shell.is-signup .panel-for-signup {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.panel-kicker {
  margin-bottom: 12px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
}

.auth-panel-copy h2 {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font: 700 26px/1.2 var(--display);
}

.auth-panel-copy p {
  max-width: 390px;
  margin: 10px 0 18px;
  color: #e1eaff;
  font-size: 13px;
  line-height: 1.6;
}

.panel-switch {
  min-width: 130px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lime);
  border-radius: 6px;
  color: var(--ink);
  background: var(--lime);
  font: 700 13px var(--body);
  transition: background 150ms ease, color 150ms ease;
}

.panel-switch:hover {
  background: #e4ff91;
  color: var(--ink);
}

.panel-switch span {
  display: inline-block;
  margin-left: 6px;
}

.launch-art {
  position: relative;
  display: block;
  width: min(100%, 360px);
  height: min(32vh, 220px);
  flex: 0 0 auto;
  margin-top: 16px;
  animation: rocket-ready 2.4s ease-in-out infinite alternate;
}

.auth-illustration,
.auth-rocket-flight {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-rocket-flight {
  clip-path: inset(0 62% 0 0);
  opacity: 0;
  pointer-events: none;
  transform-origin: 22% 78%;
}

.rocket-flame {
  position: absolute;
  z-index: 3;
  top: 76%;
  left: 27%;
  display: none;
  width: 44px;
  height: 82px;
  transform: translateX(-50%) scaleY(.82);
  transform-origin: 50% 0;
}

.rocket-flame::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 30px;
  height: 68px;
  clip-path: polygon(17% 0, 83% 0, 100% 24%, 78% 70%, 50% 100%, 22% 70%, 0 24%);
  background: linear-gradient(180deg, #fffde4 0%, #fff36a 18%, #ffad18 53%, #f04e1f 100%);
  filter: drop-shadow(0 0 6px rgba(255, 190, 32, .85)) drop-shadow(0 4px 10px rgba(231, 74, 21, .55));
}

.rocket-flame::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff9c4;
  box-shadow: 37px 9px 0 1px #ff8c1c, -2px 23px 0 -1px #ffe66b, 39px 34px 0 #f25b22;
  animation: flame-sparks .28s ease-in-out infinite alternate;
}

.rocket-flame i {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 16px;
  width: 12px;
  height: 43px;
  background: linear-gradient(#fff, #fff5b0 72%, rgba(255,255,255,0));
  clip-path: polygon(20% 0, 80% 0, 100% 32%, 50% 100%, 0 32%);
  filter: drop-shadow(0 0 3px #fff7b0);
}

.auth-shell.is-typing .rocket-flame {
  display: block !important;
  animation: flame-flicker .11s ease-in-out infinite alternate;
}

.login-success-message {
  max-width: 340px;
  margin: 14px 0 0;
  color: #e1eaff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.auth-shell.is-flight-success .launch-art {
  animation: none;
}

.auth-shell.is-flight-success .auth-illustration {
  clip-path: inset(0 0 0 38%);
}

.auth-shell.is-flight-success .auth-rocket-flight {
  opacity: 1;
  animation: rocket-liftoff 1.45s cubic-bezier(.26,.65,.28,1) forwards;
}

.auth-shell.is-flight-success .auth-signin {
  opacity: 0;
  pointer-events: none;
}

@keyframes rocket-ready {
  to { transform: translateY(-4px) rotate(-.35deg); }
}

@keyframes flame-flicker {
  from { transform: translateX(-50%) scaleY(.74) scaleX(.88) rotate(-2deg); }
  to { transform: translateX(-50%) scaleY(1.08) scaleX(1.1) rotate(2deg); }
}

@keyframes flame-sparks {
  from { transform: translate(-1px, 0) scale(.85); opacity: .75; }
  to { transform: translate(2px, -5px) scale(1.2); opacity: 1; }
}

@keyframes rocket-liftoff {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  18% { opacity: 1; transform: translate(0, 5px) rotate(-3deg) scale(1.04); }
  100% { opacity: 0; transform: translate(70%, -175%) rotate(14deg) scale(.62); }
}

/* ==========================================================================
   Orders & Order Detail Page
   ========================================================================== */
.text-link {
  color: var(--teal);
  font-weight: 700;
}

.page-shell {
  max-width: 1120px;
  min-height: 480px;
  margin: 0 auto;
  padding: 56px 36px 80px;
  width: 100%;
}

.page-heading {
  margin-bottom: 28px;
}

.page-heading .eyebrow {
  margin-bottom: 8px;
}

.page-heading h1 {
  margin: 0;
  font: 800 clamp(26px, 3.5vw, 36px)/1.15 var(--display);
}

.page-heading > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.orders-list {
  border-top: 1px solid var(--line);
}

.order-row {
  min-height: 80px;
  display: grid;
  grid-template-columns: 44px minmax(150px, 1fr) 130px 135px 18px;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 12px 6px;
  transition: background 160ms ease;
}

.order-row:hover {
  background: rgba(255,255,255,.7);
}

.order-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--lime);
  border-radius: 9px 9px 9px 2px;
  font: 800 16px var(--display);
  flex-shrink: 0;
}

.order-main strong,
.order-main small {
  display: block;
}

.order-main strong {
  font-size: 14px;
}

.order-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.order-amount {
  font-size: 13px;
  font-weight: 700;
}

.status {
  display: inline-block;
  width: max-content;
  padding: 5px 10px;
  border-radius: 99px;
  background: #e0efda;
  color: #326143;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.status-pending { background: #fff0ca; color: #79581a; }
.status-expired, .status-payment_error { background: #f8ded5; color: #803d30; }
.status-paid_unfulfilled { background: #dbeafe; color: #1d4c9c; }

.row-arrow {
  color: var(--teal);
  font-weight: 700;
}

.order-empty {
  margin-top: 20px;
}

.order-empty .text-link {
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
}

.narrow-shell {
  max-width: 1040px;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}

.order-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.order-detail-head h1 {
  margin: 0;
  font: 800 clamp(24px, 3vw, 32px)/1.2 var(--display);
}

.order-detail-head .eyebrow {
  margin-bottom: 6px;
}

.order-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.order-progress li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
}

.order-progress li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 14px;
  right: -6px;
  left: 40px;
  height: 2px;
  background: var(--line);
  content: "";
}

.order-progress li > span {
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #b6c0cb;
  border-radius: 50%;
  background: #fff;
  color: #5d6a79;
  font-size: 12px;
  font-weight: 800;
}

.order-progress li > strong {
  color: var(--ink);
  font-size: 13px;
}

.order-progress li > small {
  color: var(--muted);
  font-size: 11px;
}

.order-progress .progress-complete > span {
  border-color: #4b9a69;
  background: #e0f0e4;
  color: #27613d;
}

.order-progress .progress-current > span {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.order-progress .progress-failed > span {
  border-color: #bf5547;
  background: #fae5e1;
  color: #8b3329;
}

.order-progress .progress-next > span {
  background: #f2f4f6;
  color: #778391;
}

.detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 40px;
  padding-top: 28px;
}

.detail-section h2 {
  margin: 0 0 10px;
  font: 700 20px var(--display);
}

.detail-section > p {
  max-width: 520px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.checkout-trust {
  max-width: 540px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid #dbeaf7;
  border-radius: 10px;
  background: linear-gradient(180deg, #f4f9ff 0%, #edf5ff 100%);
}

.trust-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--teal);
  font-weight: 800;
  flex-shrink: 0;
}

.trust-banner strong,
.trust-banner small {
  display: block;
}

.trust-banner strong {
  color: var(--ink);
  font-size: 13px;
}

.trust-banner small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.trust-points {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #3a4d64;
  font-size: 12px;
  line-height: 1.65;
}

.trust-points li + li {
  margin-top: 4px;
}

.payment-qr {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.payment-qr-note {
  max-width: 380px;
  margin: 10px 0 0;
  color: #77500b;
  font-size: 12px;
  line-height: 1.55;
}

.invoice-expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 380px;
  margin: 18px 0 14px;
  padding: 12px 14px;
  border: 1px solid #ead8ad;
  border-radius: 6px;
  background: #fff8e8;
  color: #75551f;
  font-size: 13px;
}

.invoice-expiry strong {
  font: 700 15px var(--display);
  font-variant-numeric: tabular-nums;
}

.invoice-expiry.is-ended {
  border-color: #efc7bd;
  background: #fff0ec;
  color: #8b3329;
}

.invoice-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 380px;
  margin: 18px 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.invoice-amount strong {
  color: var(--ink);
  font: 800 22px var(--display);
}

.detail-section .button {
  margin: 4px 10px 8px 0;
}

.credential-box {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  padding: 18px;
  background: #eaf0e5;
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  color: var(--ink);
  font: 500 13px/1.7 var(--body);
}

.summary-section {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-self: start;
}

.summary-section .eyebrow {
  margin-bottom: 16px;
}

.summary-row, .summary-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-bottom: 1px solid #e8ece4;
  color: var(--muted);
  font-size: 12px;
}

.summary-row strong, .summary-total strong {
  color: var(--ink);
  text-align: right;
}

.summary-total {
  margin-top: 4px;
  border: 0;
  font-weight: 700;
}

/* ==========================================================================
   Support Page
   ========================================================================== */
.support-shell {
  max-width: 1180px;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 28px;
}

.support-form-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.support-form-panel h2,
.section-title-row h2 {
  margin: 0 0 18px;
  font: 700 19px var(--display);
}

.support-form {
  display: grid;
  gap: 10px;
}

.support-form label,
.support-admin-form label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.support-form label span {
  color: #8290a0;
  font-weight: 400;
}

.support-form input,
.support-form select,
.support-form textarea,
.support-admin-form select,
.support-admin-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cfd8ce;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 14px/1.5 var(--body);
}

.support-form textarea,
.support-admin-form textarea {
  resize: vertical;
}

.support-form .button,
.support-admin-form .button {
  justify-self: start;
  margin-top: 8px;
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.section-title-row h2 {
  margin-bottom: 14px;
}

.section-title-row > span {
  color: var(--muted);
  font-size: 12px;
}

.support-ticket-list {
  min-width: 0;
}

.support-ticket {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.support-ticket-head,
.support-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.support-ticket-head > strong,
.support-admin-head > div > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font: 600 14px/1.4 var(--display);
}

.support-ticket-meta,
.support-admin-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.support-ticket-message {
  margin: 12px 0;
  color: #34445a;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ticket-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 6px;
  background: #fff0ca;
  color: #79581a;
  font-size: 10px;
  font-weight: 700;
}

.ticket-in_progress { background: #dbeafe; color: #1d4c9c; }
.ticket-resolved { background: #e0efda; color: #326143; }

.support-response {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--teal);
  background: #eef4fc;
  border-radius: 0 6px 6px 0;
}

.support-response strong {
  color: #1b4b91;
  font-size: 11px;
}

.support-response p {
  margin: 6px 0 0;
  color: #34445a;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.support-waiting {
  margin: 10px 0 0;
  color: #7c6a41;
  font-size: 11px;
}

.support-empty {
  padding: 24px 20px;
  border: 1px dashed #cbd4c9;
  border-radius: 8px;
}

.support-empty h3 {
  margin: 0 0 6px;
  font: 600 15px var(--display);
}

.support-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* ==========================================================================
   Admin Dashboard
   ========================================================================== */
body:has(.admin-shell) {
  background: #eef2f7;
  color: #14263f;
}

.admin-shell {
  --ax-ink: #14263f;
  --ax-muted: #5b6c80;
  --ax-line: #dde5ee;
  --ax-soft: #f5f8fc;
  --ax-blue: #3158e8;
  --ax-navy: #12233e;
  --ax-lime: #d3f35b;
  max-width: 1240px;
  padding-top: 36px;
  color: var(--ax-ink);
  font-size: 14px;
}

.admin-shell [id] {
  scroll-margin-top: 84px;
}

.admin-shell h1,
.admin-shell h2,
.admin-shell h3 {
  color: var(--ax-ink);
  font-family: var(--display);
}

.admin-shell input,
.admin-shell select,
.admin-shell textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #c9d4e0;
  border-radius: 8px;
  background: #fff;
  color: var(--ax-ink);
  font: 14px/1.45 var(--body);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.admin-shell input[type="file"] {
  padding: 7px;
  font-size: 12px;
}

.admin-shell textarea {
  resize: vertical;
}

.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus {
  border-color: #7e9feb;
  box-shadow: 0 0 0 3px rgba(49,88,232,.14);
  outline: 0;
}

.admin-shell .button {
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
}

.admin-shell .button-outline {
  background: #fff;
  border-color: #c9d4e0;
}

.admin-shell .button-outline:hover {
  border-color: var(--ax-blue);
  color: var(--ax-blue);
}

.admin-shell .button-dark {
  background: var(--ax-blue);
}

.admin-shell .button-dark:hover {
  background: #2548cc;
}

.ax-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--ax-muted);
  font-size: 12px;
  font-weight: 700;
}

.ax-field label span {
  font-weight: 400;
}

.ax-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ax-field-wide {
  grid-column: 1 / -1;
}

.ax-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.ax-top h1 {
  margin: 0;
  font: 800 clamp(26px, 4vw, 36px)/1.1 var(--display);
  letter-spacing: -.03em;
}

.ax-top p {
  max-width: 52ch;
  margin: 8px 0 0;
  color: var(--ax-muted);
  font-size: 14px;
}

.ax-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ax-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding: 6px;
  border: 1px solid var(--ax-line);
  border-radius: 10px;
  background: #fff;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.ax-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 7px;
  color: var(--ax-muted);
  font-size: 13px;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.ax-nav a:hover {
  background: var(--ax-soft);
  color: var(--ax-ink);
}

.ax-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--ax-blue);
  color: #fff;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.ax-kpis {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.ax-kpi {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--ax-line);
  border-radius: 12px;
  background: #fff;
}

.ax-kpi > span {
  display: block;
  color: var(--ax-muted);
  font-size: 13px;
  font-weight: 700;
}

.ax-kpi strong {
  display: block;
  margin-top: 10px;
  font: 800 clamp(22px, 2.6vw, 30px)/1.05 var(--display);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ax-kpi small {
  display: block;
  margin-top: 8px;
  color: #6d7d91;
  font-size: 12px;
  line-height: 1.45;
}

.ax-kpi-main {
  border-color: var(--ax-navy);
  background: var(--ax-navy);
}

.ax-kpi-main > span {
  color: #b9c9de;
}

.ax-kpi-main strong {
  color: var(--ax-lime);
  font-size: clamp(28px, 3.6vw, 42px);
}

.ax-kpi-main small {
  color: #9fb2cb;
}

.ax-kpi.is-warn {
  border-color: #ecd28a;
  background: #fff8e6;
}

.ax-kpi.is-warn strong {
  color: #8a5200;
}

.ax-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid #ecd28a;
  border-radius: 10px;
  background: #fff8e6;
  color: #5c4410;
}

.ax-alert-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f4d36f;
  color: #503b0e;
  font-weight: 800;
}

.ax-alert p {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.ax-alert strong, .ax-alert small {
  display: block;
}

.ax-alert strong {
  font-size: 14px;
}

.ax-alert small {
  margin-top: 2px;
  color: #7a6430;
  font-size: 12px;
}

.ax-alert a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.ax-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--ax-line);
  border-radius: 12px;
  background: #fff;
}

.ax-section {
  margin-top: 20px;
}

.ax-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.ax-head h2 {
  margin: 0;
  font: 700 20px/1.25 var(--display);
  letter-spacing: -.02em;
}

.ax-head p {
  margin: 4px 0 0;
  color: var(--ax-muted);
  font-size: 13px;
}

.ax-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ax-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ax-range label {
  color: var(--ax-muted);
  font-size: 12px;
  font-weight: 700;
}

.ax-range input {
  width: 148px;
}

.ax-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 -22px;
  border-top: 1px solid var(--ax-line);
}

.ax-metrics article {
  min-width: 0;
  padding: 16px 22px;
}

.ax-metrics article + article {
  border-left: 1px solid var(--ax-line);
}

.ax-metrics span {
  display: block;
  color: var(--ax-muted);
  font-size: 13px;
}

.ax-metrics strong {
  display: block;
  margin-top: 6px;
  font: 700 24px/1.2 var(--display);
  font-variant-numeric: tabular-nums;
}

.ax-metrics .ax-metric-text {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.ax-metrics small {
  display: block;
  margin-top: 4px;
  color: #6d7d91;
  font-size: 12px;
}

.ax-chart {
  padding-top: 14px;
  border-top: 1px solid var(--ax-line);
}

.ax-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ax-chart-head h3 {
  margin: 0;
  font: 700 14px var(--display);
}

.ax-chart-head span {
  color: var(--ax-muted);
  font-size: 12px;
}

.ax-chart-scroll {
  overflow-x: auto;
  margin-top: 6px;
  -webkit-overflow-scrolling: touch;
}

.ax-chart svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
  overflow: visible;
}

.chart-gridline { stroke: #e6ebf1; stroke-width: 1; }
.chart-axis-label, .chart-date-label { fill: #66768a; font: 11px var(--body); }
.sales-bar { fill: var(--ax-blue); }
.sales-bar:hover { fill: var(--ax-navy); }

.ax-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.ax-product-list {
  display: grid;
  gap: 12px;
}

.ax-product {
  padding: 16px;
  border: 1px solid var(--ax-line);
  border-left-width: 4px;
  border-radius: 10px;
  background: #fff;
}

.ax-product.is-low { border-left-color: #e0a62e; }
.ax-product.is-out { border-left-color: #d4553a; }

.ax-product-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.ax-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid var(--ax-line);
  border-radius: 10px;
  object-fit: cover;
  background: #e8eef6;
}

.ax-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--ax-blue);
  font: 800 20px var(--display);
}

.ax-product-info {
  min-width: 0;
}

.ax-product-info h3 {
  margin: 0;
  font: 700 15px/1.3 var(--display);
  overflow-wrap: anywhere;
}

.ax-product-info p {
  margin: 3px 0 0;
  color: var(--ax-muted);
  font-size: 13px;
}

.ax-stock-num {
  text-align: right;
}

.ax-stock-num strong {
  display: block;
  font: 800 24px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.ax-stock-num span {
  color: var(--ax-muted);
  font-size: 12px;
}

.ax-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.ax-tag {
  padding: 3px 10px;
  border-radius: 99px;
  background: #e8eef6;
  color: #3b4d63;
  font-size: 12px;
  font-weight: 700;
}

.ax-tag-ok { background: #e0efda; color: #2f5d3d; }
.ax-tag-warn { background: #fff0ca; color: #77500b; }
.ax-tag-out { background: #f8ded5; color: #803d30; }

.ax-stock-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 10px;
}

.ax-stock-form textarea {
  min-height: 64px;
  font-size: 13px;
}

.ax-edit {
  margin-top: 12px;
  border-top: 1px solid var(--ax-line);
}

.ax-edit summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0 4px;
  color: var(--ax-blue);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.ax-edit summary::-webkit-details-marker { display: none; }

.ax-edit summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.ax-edit[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.ax-edit summary:focus-visible {
  outline: 3px solid var(--ax-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.ax-edit-body {
  display: grid;
  gap: 16px;
  padding: 12px 0 2px;
}

.ax-edit-body > form + form {
  padding-top: 16px;
  border-top: 1px dashed var(--ax-line);
}

.ax-photo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 10px;
}

.ax-empty {
  margin: 0;
  padding: 28px 16px;
  border: 1px dashed #c9d4e0;
  border-radius: 10px;
  color: var(--ax-muted);
  text-align: center;
}

/* Tables */
.table-wrap,
.ax-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.ax-table-wrap {
  border-color: var(--ax-line);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

th {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  background: #f8fafc;
  white-space: nowrap;
}

td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

td a {
  color: var(--teal);
  font-weight: 700;
}

.admin-shell th {
  padding: 11px 14px;
  background: var(--ax-soft);
  color: var(--ax-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-shell td {
  padding: 12px 14px;
  border-top: 1px solid var(--ax-line);
  vertical-align: middle;
}

.admin-shell tbody tr:hover {
  background: #f8fafd;
}

.admin-shell td a {
  color: var(--ax-blue);
}

.admin-shell .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-shell .status {
  padding: 4px 10px;
  font-size: 12px;
}

.admin-shell .fulfill-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

.ax-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-nowrap {
  white-space: nowrap;
}

.ax-dash {
  color: #9aa8b8;
}

.ax-empty-cell {
  padding: 28px 14px !important;
  color: var(--ax-muted);
  text-align: center;
}

.admin-shell .activity-details {
  max-width: 420px;
  color: var(--ax-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ax-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 10px;
  background: var(--ax-soft);
}

.ax-filters .ax-field {
  flex: 1 1 150px;
}

.ax-filters .ax-field-search {
  flex: 2 1 240px;
}

.ax-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ax-clear {
  color: var(--ax-muted);
  font-size: 13px;
  font-weight: 700;
}

.ax-clear:hover {
  color: var(--ax-blue);
}

.ax-tickets {
  display: grid;
  gap: 12px;
}

.ax-ticket {
  padding: 18px;
  border: 1px solid var(--ax-line);
  border-radius: 10px;
}

.ax-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ax-ticket-head > div {
  min-width: 0;
}

.ax-ticket-head h3 {
  margin: 0;
  font: 700 15px/1.35 var(--display);
  overflow-wrap: anywhere;
}

.ax-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 4px 0 0;
  color: var(--ax-muted);
  font-size: 13px;
}

.admin-shell .ticket-status {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
}

.ax-ticket-msg {
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 3px solid #9db4e8;
  border-radius: 0 8px 8px 0;
  background: var(--ax-soft);
  color: #34445a;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ax-ticket-form {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px 16px;
}

.ax-ticket-form .button {
  grid-column: 2;
  justify-self: start;
}

.admin-shell .support-empty {
  padding: 28px 18px;
  border-radius: 10px;
  text-align: center;
}

.admin-shell .support-empty h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.admin-shell .support-empty p {
  margin: 0;
  color: var(--ax-muted);
  font-size: 13px;
}

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

/* ==========================================================================
   RESPONSIVE STYLES
   Tablet (641px - 1024px) & Mobile / HP (<= 640px)
   ========================================================================== */

/* Tablet & Medium Screens (641px to 1024px) */
@media (max-width: 1024px) {
  .site-header {
    padding: 0 24px;
    height: 70px;
  }

  .hero {
    padding: 64px 6% 60px;
  }

  .catalog-section,
  .how-section {
    padding-left: 6%;
    padding-right: 6%;
  }

  body.marketplace-page .product-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .how-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .product-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
    gap: 28px;
  }

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

  .ax-kpi-main {
    grid-column: 1 / -1;
  }

  .ax-workspace {
    grid-template-columns: 1fr;
  }

  .support-layout {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: 20px;
  }
}

/* Auth responsive container (Tablets & Phones <= 870px) */
@media (max-width: 870px) {
  .auth-stage {
    min-height: 100vh;
    padding: 0;
  }

  .auth-shell {
    width: 100%;
    min-height: max(850px, 100vh);
    height: 100vh;
    max-height: 1100px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-shell::before {
    display: none;
  }

  .auth-panels {
    display: block;
    inset: 0 0 auto;
    width: 100%;
    height: 36%;
    min-height: 280px;
    transform: none;
    border-radius: 0 0 50% 50% / 0 0 12% 12%;
    background: var(--blue);
  }

  .auth-shell.is-signup .auth-panels {
    transform: none;
  }

  .auth-panel-copy {
    padding: 40px 8% 8px;
  }

  .panel-kicker {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .auth-panel-copy h2 {
    font-size: 22px;
  }

  .auth-panel-copy p {
    max-width: 440px;
    margin: 6px 0 10px;
    font-size: 12px;
  }

  .panel-switch {
    display: none;
  }

  .launch-art {
    width: min(220px, 45vw);
    height: 108px;
    margin-top: 2px;
    transform: translateY(8px);
  }

  .rocket-flame {
    top: 55%;
    left: 32%;
    width: 34px;
    height: 42px;
  }

  .auth-forms {
    position: absolute;
    inset: 36% 0 0;
  }

  .auth-form, .auth-signup {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    padding: 24px 9% 34px;
    transform: translateY(0);
  }

  .auth-signup {
    transform: translateY(8%);
  }

  .auth-shell.is-signup .auth-signin {
    transform: translateY(-8%);
  }

  .auth-shell.is-signup .auth-signup {
    transform: translateY(0);
  }

  .auth-form h1 {
    font-size: 28px;
  }

  .auth-mobile-toggle {
    display: block;
    margin: 16px 0 0;
    color: #666;
    font-size: 13px;
    text-align: center;
  }

  .auth-mobile-toggle a {
    color: var(--blue);
    font-weight: 700;
  }
}

/* Smartphone / HP Screens (<= 640px) */
@media (max-width: 640px) {
  /* Header */
  .site-header {
    height: auto;
    min-height: 60px;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  body.marketplace-page .site-header {
    height: auto;
    min-height: 60px;
    padding: 8px 16px;
  }

  .wordmark {
    gap: 7px;
    font-size: 17px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .main-nav {
    gap: 8px 12px;
    font-size: 13px;
  }

  .nav-signup {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 44px 16px 40px;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.15;
  }

  .hero-description {
    margin: 16px auto 22px;
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    gap: 10px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-proof {
    margin-top: 28px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    font-size: 11px;
  }

  /* Catalog & Sections */
  .catalog-section {
    padding: 44px 16px 52px;
  }

  body.marketplace-page .catalog-section {
    padding: 24px 14px 48px;
  }

  .marketplace-heading {
    flex-direction: row;
    align-items: flex-end;
  }

  .marketplace-heading h2,
  .section-heading h2,
  .how-title h2 {
    font-size: 24px;
  }

  .catalog-caption {
    margin: 4px 0 14px;
    font-size: 12px;
  }

  .catalog-controls {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

  .category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 2px 14px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-chips::-webkit-scrollbar {
    display: none;
  }

  .category-chip {
    min-height: 34px;
    padding: 0 11px;
    font-size: 11px;
    flex-shrink: 0;
  }

  .catalog-count {
    text-align: left;
    font-size: 11px;
  }

  /* Product Grid on Mobile */
  .product-grid,
  body.marketplace-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.marketplace-page .product-card {
    padding: 9px;
  }

  .product-card {
    min-height: 200px;
    padding: 14px;
  }

  body.marketplace-page .product-photo {
    aspect-ratio: 16 / 11;
    margin-bottom: 8px;
  }

  .art-brand {
    top: 7px;
    left: 8px;
    right: 8px;
    font-size: 7px;
  }

  .product-art > strong {
    right: 8px;
    bottom: 26%;
    left: 8px;
    font-size: 11px;
  }

  .art-bars {
    right: 8px;
    left: 8px;
    bottom: 8px;
  }

  .store-chip {
    gap: 4px;
    font-size: 9px;
  }

  .store-avatar {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 9px;
  }

  body.marketplace-page .stock-label {
    font-size: 9px;
  }

  body.marketplace-page .product-copy h2 {
    font-size: 12px;
    min-height: 2.3em;
  }

  body.marketplace-page .product-copy p {
    font-size: 10px;
  }

  body.marketplace-page .product-bottom {
    min-height: 40px;
    padding-top: 6px;
  }

  body.marketplace-page .product-bottom strong {
    font-size: 13px;
  }

  body.marketplace-page .icon-button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* How it Works on Mobile */
  .how-section,
  body.marketplace-page .how-section {
    padding: 44px 16px 50px;
    gap: 22px;
  }

  .how-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .how-steps article {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    padding-top: 10px;
  }

  .step-number {
    grid-row: span 2;
    padding-top: 2px;
  }

  .how-steps h3 {
    margin: 0 0 4px;
  }

  .how-steps p {
    grid-column: 2;
  }

  /* Testimonials & FAQ on Mobile */
  .testimonial-section,
  body.marketplace-page .testimonial-section {
    padding: 44px 16px 52px;
  }

  .testimonial-section .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .testimonial-card {
    min-height: auto;
    padding: 20px;
  }

  .faq-section,
  body.marketplace-page .faq-section {
    padding: 0 16px 40px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .closing-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 16px;
  }

  .closing-band a {
    align-self: flex-start;
  }

  .site-footer {
    min-height: 90px;
    padding: 18px 16px;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .site-footer p {
    order: 3;
    width: 100%;
  }

  .footer-note {
    margin-left: auto;
  }

  /* Product Detail on Mobile */
  body.marketplace-page .product-detail-shell {
    padding: 20px 16px 56px;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .product-detail-media > img,
  .product-detail-art {
    aspect-ratio: 16 / 10;
  }

  .product-detail-copy {
    padding: 0;
  }

  .product-detail-description {
    font-size: 14px;
  }

  .product-information {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
    padding-top: 22px;
  }

  .reviews-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .review-form {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }

  .review-form textarea,
  .review-form .button {
    grid-column: 1;
  }

  .review-item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  /* Orders on Mobile */
  .page-shell {
    min-height: auto;
    padding: 36px 16px 56px;
  }

  .order-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 14px;
    gap: 10px;
    padding: 14px 4px;
  }

  .order-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .order-amount {
    display: none;
  }

  .order-main small {
    font-size: 10px;
  }

  .status {
    padding: 4px 8px;
    font-size: 10px;
  }

  /* Order Detail on Mobile */
  .detail-split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 20px;
  }

  .order-detail-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .summary-section {
    order: -1;
    padding: 18px;
  }

  .order-progress {
    gap: 6px;
    margin-top: 18px;
  }

  .order-progress li {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0 6px;
  }

  .order-progress li:not(:last-child)::after {
    right: -3px;
    left: 32px;
  }

  .order-progress li > span {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .order-progress li > strong {
    font-size: 11px;
  }

  .order-progress li > small {
    font-size: 9px;
  }

  .payment-qr {
    width: 190px;
    margin: 0 auto;
  }

  .invoice-expiry,
  .invoice-amount {
    max-width: 100%;
  }

  /* Support on Mobile */
  .support-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .support-form-panel {
    padding: 18px;
  }

  /* Admin on Mobile */
  .admin-shell {
    padding-top: 20px;
  }

  .ax-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .ax-top-actions {
    width: 100%;
  }

  .ax-top-actions .button {
    flex: 1 1 auto;
  }

  .ax-kpis {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ax-kpi {
    padding: 16px;
  }

  .ax-panel {
    padding: 16px;
  }

  .ax-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ax-head-tools,
  .ax-range {
    width: 100%;
    justify-content: flex-start;
  }

  .ax-range input {
    flex: 1 1 120px;
    width: auto;
  }

  .ax-metrics {
    grid-template-columns: 1fr;
    margin: 0 -16px;
  }

  .ax-metrics article {
    padding: 12px 16px;
  }

  .ax-metrics article + article {
    border-top: 1px solid var(--ax-line);
    border-left: 0;
  }

  .ax-product-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .ax-thumb {
    width: 48px;
    height: 48px;
  }

  .ax-stock-num {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-align: left;
  }

  .ax-stock-form,
  .ax-photo-form,
  .ax-fields {
    grid-template-columns: 1fr;
  }

  .ax-ticket-head {
    flex-direction: column;
  }

  .ax-ticket-form {
    grid-template-columns: 1fr;
  }

  .ax-ticket-form .button {
    grid-column: 1;
  }

  .ax-alert {
    flex-wrap: wrap;
  }
}

/* Extra Small Phones (< 380px) */
@media (max-width: 380px) {
  .product-grid,
  body.marketplace-page .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .main-nav {
    gap: 6px 8px;
    font-size: 12px;
  }

  .auth-form {
    padding: 20px 16px 28px;
  }
}

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

  .auth-shell.is-typing .rocket-flame {
    display: block !important;
    animation: none !important;
    transform: translateX(-50%) scaleY(.92);
  }

  .auth-shell.is-typing .rocket-flame::after {
    animation: none !important;
  }

  .admin-shell * {
    transition: none !important;
  }
}