/* JB 3D Printing — shared commerce, account and admin design layer */
:root {
  --app-ink: #0b0e10;
  --app-ink-2: #151a1d;
  --app-ink-3: #20282b;
  --app-paper: #f3f1ea;
  --app-white: #ffffff;
  --app-muted: #9ca6aa;
  --app-line: #354044;
  --app-cyan: #13d6cc;
  --app-cyan-soft: #62eee7;
  --app-cyan-dark: #087f7a;
  --app-orange: #ff6a3d;
  --app-danger: #ff6b6b;
  --app-success: #5ee29a;
  --app-radius: 2px;
  --app-shell: min(1180px, calc(100vw - 48px));
}

html { color-scheme: dark; }
body.commerce-shell,
body.payment-shell {
  margin: 0;
  min-height: 100vh;
  color: var(--app-white);
  background: var(--app-ink);
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.commerce-shell *,
.payment-shell * { box-sizing: border-box; }
.commerce-shell button,
.commerce-shell input,
.commerce-shell select,
.commerce-shell textarea { font: inherit; }
.commerce-shell button,
.commerce-shell a { -webkit-tap-highlight-color: transparent; }
.commerce-shell img,
.commerce-shell svg { max-width: 100%; }

/* Tailwind utility normalisation: keep behaviour, replace the old visual language. */
.commerce-shell [class*="bg-gradient"],
.commerce-shell [class*="from-cyan"],
.commerce-shell [class*="to-cyan"],
.commerce-shell [class*="from-purple"],
.commerce-shell [class*="to-purple"],
.commerce-shell [class*="from-blue"],
.commerce-shell [class*="to-blue"],
.commerce-shell [class*="from-pink"],
.commerce-shell [class*="to-pink"] {
  background-image: none !important;
}
.commerce-shell [class*="bg-gray-950"],
.commerce-shell [class*="bg-black"] { background-color: var(--app-ink) !important; }
.commerce-shell [class*="bg-gray-900"] { background-color: var(--app-ink-2) !important; }
.commerce-shell [class*="bg-gray-800"],
.commerce-shell [class*="bg-slate-800"] { background-color: var(--app-ink-3) !important; }
.commerce-shell [class*="bg-gray-700"] { background-color: #2b3538 !important; }
.commerce-shell [class*="bg-cyan-500"],
.commerce-shell [class*="bg-cyan-600"] { background-color: var(--app-cyan) !important; }
.commerce-shell [class*="bg-purple-"],
.commerce-shell [class*="bg-blue-"],
.commerce-shell [class*="bg-pink-"] { background-color: var(--app-cyan-dark) !important; }

.commerce-shell [class*="text-cyan-"] { color: var(--app-cyan) !important; }
.commerce-shell [class*="text-purple-"],
.commerce-shell [class*="text-blue-"],
.commerce-shell [class*="text-pink-"] { color: var(--app-cyan-soft) !important; }
.commerce-shell [class*="text-gray-600"] { color: #8d989c !important; }
.commerce-shell [class*="text-gray-500"] { color: #9ca6aa !important; }
.commerce-shell [class*="text-gray-400"] { color: #b8c0c2 !important; }
.commerce-shell [class*="text-gray-300"] { color: #d7dcde !important; }
.commerce-shell [class*="bg-clip-text"],
.commerce-shell [class*="text-transparent"] {
  background-image: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
}

.commerce-shell [class*="border-gray-"],
.commerce-shell [class*="border-slate-"],
.commerce-shell [class*="border-cyan-"] { border-color: var(--app-line) !important; }
.commerce-shell [class*="border-purple-"],
.commerce-shell [class*="border-blue-"],
.commerce-shell [class*="border-pink-"] { border-color: var(--app-cyan-dark) !important; }

.commerce-shell [class*="rounded-lg"],
.commerce-shell [class*="rounded-xl"],
.commerce-shell [class*="rounded-2xl"],
.commerce-shell [class*="rounded-3xl"] { border-radius: var(--app-radius) !important; }
.commerce-shell [class*="shadow-"] { box-shadow: none !important; }
.commerce-shell [class*="backdrop-blur"] { backdrop-filter: none !important; }
.commerce-shell [class*="blur-2xl"],
.commerce-shell [class*="blur-3xl"] { display: none !important; }

/* Shared shell and navigation */
.commerce-shell #root { min-height: 100vh; background: var(--app-ink); }
.commerce-shell #root > div { min-height: 100vh; }
.commerce-shell nav {
  border-bottom: 1px solid var(--app-line) !important;
  background: rgba(11, 14, 16, .97) !important;
  box-shadow: none !important;
}
.commerce-shell nav button {
  min-height: 44px;
  border-radius: var(--app-radius) !important;
  font-weight: 750;
}
.commerce-shell nav button:first-of-type {
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.commerce-shell nav button:hover,
.commerce-shell nav button:focus-visible { color: var(--app-cyan) !important; }

.commerce-shell h1,
.commerce-shell h2,
.commerce-shell h3 {
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.commerce-shell h1 { letter-spacing: -.05em !important; }
.commerce-shell h4,
.commerce-shell [class*="uppercase"] {
  letter-spacing: .12em !important;
}

/* Forms, authentication and profile configuration */
.commerce-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.commerce-shell select,
.commerce-shell textarea {
  min-height: 48px;
  border: 0 !important;
  border-bottom: 1px solid #697579 !important;
  border-radius: 0 !important;
  color: var(--app-white) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}
.commerce-shell textarea { min-height: 120px; }
.commerce-shell input::placeholder,
.commerce-shell textarea::placeholder { color: #7f8b8f !important; opacity: 1; }
.commerce-shell input:focus,
.commerce-shell select:focus,
.commerce-shell textarea:focus {
  border-bottom: 2px solid var(--app-cyan) !important;
  box-shadow: none !important;
}
.commerce-shell input[type="checkbox"],
.commerce-shell input[type="radio"] { accent-color: var(--app-cyan); }
.commerce-shell label { color: #d9dfe1; }

.commerce-shell button {
  border-radius: var(--app-radius) !important;
}
.commerce-shell button[class*="bg-cyan"],
.commerce-shell button[class*="from-cyan"],
.commerce-shell button[class*="to-cyan"],
.commerce-shell button[type="submit"] {
  min-height: 48px;
  border: 1px solid var(--app-cyan) !important;
  color: var(--app-ink) !important;
  background: var(--app-cyan) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}
.commerce-shell button[class*="bg-cyan"]:hover,
.commerce-shell button[type="submit"]:hover {
  background: var(--app-cyan-soft) !important;
  transform: translateY(-1px);
}
.commerce-shell button:focus-visible,
.commerce-shell a:focus-visible,
.commerce-shell input:focus-visible,
.commerce-shell select:focus-visible,
.commerce-shell textarea:focus-visible {
  outline: 3px solid var(--app-cyan) !important;
  outline-offset: 3px;
}
.commerce-shell button:disabled { cursor: not-allowed; opacity: .5; }

/* Cards, modals, result panels and uploads */
.commerce-shell [class*="rounded-"][class*="border"],
.commerce-shell [role="dialog"] > div,
.commerce-shell form[class*="bg-"] {
  border-color: var(--app-line) !important;
  box-shadow: none !important;
}
.commerce-shell [class*="ring-cyan"],
.commerce-shell [class*="ring-purple"] { --tw-ring-color: var(--app-cyan) !important; }
.commerce-shell [class*="border-dashed"] {
  border: 1px dashed #728084 !important;
  background: rgba(19, 214, 204, .03) !important;
}
.commerce-shell [class*="border-dashed"]:hover {
  border-color: var(--app-cyan) !important;
  background: rgba(19, 214, 204, .07) !important;
}

/* Product catalogue: Explore surface, filters and products lead. */
.commerce-shell [class*="grid-cols-"] > [class*="group"][class*="border"],
.commerce-shell [class*="grid-cols-"] > [class*="rounded-"][class*="border"] {
  overflow: hidden;
  border: 1px solid var(--app-line) !important;
  background: var(--app-ink-2) !important;
  box-shadow: none !important;
}
.commerce-shell [class*="grid-cols-"] > [class*="group"][class*="border"]:hover,
.commerce-shell [class*="grid-cols-"] > [class*="rounded-"][class*="border"]:hover {
  border-color: var(--app-cyan-dark) !important;
  transform: translateY(-2px);
}
.commerce-shell [class*="aspect-"] { background-color: #202a2c !important; }
.commerce-shell [class*="aspect-"] img { width: 100%; height: 100%; object-fit: cover; }
.commerce-shell .commerce-product-visual {
  position: relative;
  isolation: isolate;
  background-color: #202a2c !important;
  background-image:
    linear-gradient(135deg, transparent 0 48%, rgba(19, 214, 204, .2) 49% 51%, transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.035) 24px) !important;
}
.commerce-shell .commerce-product-visual:not(:has(img))::before {
  content: attr(data-product-label);
  width: min(78%, 230px);
  color: #d6dddf;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}
.commerce-shell .commerce-product-visual:not(:has(img))::after {
  content: "PRINTED TO ORDER";
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--app-cyan);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}
.commerce-shell .commerce-product-visual + [class*="p-5"] > [class*="items-center"][class*="gap-1"] { display: none !important; }
.commerce-shell .commerce-modal-visual {
  position: relative;
  background-color: #202a2c !important;
  background-image:
    linear-gradient(135deg, transparent 0 48%, rgba(19, 214, 204, .22) 49% 51%, transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.035) 24px) !important;
}
.commerce-shell .commerce-modal-visual::before {
  content: attr(data-product-label);
  color: #d6dddf;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
}
.commerce-shell .commerce-modal-visual::after {
  content: "PRODUCT DETAIL";
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: var(--app-cyan);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}
.commerce-shell [class*="overflow-hidden"] img { transition: transform .25s ease; }
.commerce-shell [class*="overflow-hidden"]:hover img { transform: scale(1.025); }

/* Basket, checkout and order review: Operate/Configure surfaces. */
.commerce-shell table { width: 100%; border-collapse: collapse; }
.commerce-shell th {
  padding: 12px 14px;
  border-bottom: 1px solid #657074;
  color: var(--app-muted) !important;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
.commerce-shell td { padding: 16px 14px; border-bottom: 1px solid var(--app-line); }
.commerce-shell dl > div,
.commerce-shell [class*="divide-y"] > * { border-color: var(--app-line) !important; }
.commerce-shell [class*="sticky"] { background-color: rgba(11, 14, 16, .98) !important; }

/* Status, notification and admin semantics retain meaning without the old neon palette. */
.commerce-shell [class*="text-green-"] { color: var(--app-success) !important; }
.commerce-shell [class*="text-red-"] { color: var(--app-danger) !important; }
.commerce-shell [class*="text-yellow-"],
.commerce-shell [class*="text-amber-"] { color: #ffd166 !important; }
.commerce-shell [class*="bg-green-"] { background-color: rgba(94, 226, 154, .12) !important; }
.commerce-shell [class*="bg-red-"] { background-color: rgba(255, 107, 107, .12) !important; }
.commerce-shell [class*="bg-yellow-"],
.commerce-shell [class*="bg-amber-"] { background-color: rgba(255, 209, 102, .12) !important; }

/* Footer */
.commerce-shell footer {
  border-top: 1px solid var(--app-line) !important;
  color: #aeb7ba;
  background: #080a0b !important;
}
.commerce-shell footer h4,
.commerce-shell footer strong { color: var(--app-white) !important; }
.commerce-shell footer a:hover { color: var(--app-cyan) !important; }

/* Payment return */
.payment-shell {
  display: grid;
  place-items: center;
  padding: 32px;
}
.payment-shell .payment-panel {
  width: min(560px, 100%);
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid var(--app-line);
  border-top: 4px solid var(--app-cyan);
  border-radius: var(--app-radius);
  background: var(--app-ink-2);
}
.payment-shell .payment-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 58px;
  color: var(--app-white);
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.payment-shell .payment-brand img { width: 34px; height: 34px; }
.payment-shell .payment-kicker {
  margin: 0 0 14px;
  color: var(--app-cyan);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.payment-shell h1 {
  margin: 0 0 18px;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(42px, 8vw, 64px);
  line-height: .98;
  letter-spacing: -.05em;
}
.payment-shell p { margin: 0; color: #b4bdc0; }
.payment-shell .payment-progress { height: 3px; margin-top: 38px; overflow: hidden; background: #2d373a; }
.payment-shell .payment-progress::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  background: var(--app-cyan);
  animation: payment-progress 1.4s ease-in-out infinite alternate;
}
@keyframes payment-progress { to { width: 100%; } }

@media (max-width: 767px) {
  :root { --app-shell: min(100% - 28px, 1180px); }
  .commerce-shell nav { min-height: 64px; }
  .commerce-shell nav button { min-width: 44px; }
  .commerce-shell h1 { font-size: clamp(38px, 12vw, 58px) !important; }
  .commerce-shell h2 { font-size: clamp(30px, 9vw, 44px) !important; }
  .commerce-shell [class*="p-12"],
  .commerce-shell [class*="p-10"],
  .commerce-shell [class*="p-8"] { padding: 24px !important; }
  .commerce-shell table { min-width: 680px; }
  .commerce-shell [class*="overflow-x-auto"] { overscroll-behavior-inline: contain; }
  .payment-shell { padding: 18px; }
  .payment-shell .payment-panel { padding: 30px 24px; }
  .payment-shell .payment-brand { margin-bottom: 42px; }
}

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