.jc-page {
  --jc-coral: #ff6b00;
  --jc-accent: #ff6b00;
  --jc-text: #333;
  --jc-muted: #666;
  --jc-line: #f5f5f5;
  min-height: 100vh;
  background: #f5f5f5;
  color: var(--jc-text);
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1.5;
}
.jc-page *, .jc-entry * { box-sizing: border-box; }
.jc-page [hidden] { display: none !important; }
.jc-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 44px;
  padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-left, 0px)) 0;
  background: #fff;
  color: #000;
}
.jc-header h1 { margin: 0; text-align: center; font-size: .875rem; font-weight: 700; }
.jc-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0;
  cursor: pointer;
}
.jc-back::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.jc-body { display: grid; gap: .625rem; width: 100%; margin: 0; padding: .625rem .625rem max(1.25rem, env(safe-area-inset-bottom)); }
.jc-page h2, .jc-page h3, .jc-page p { margin: 0; }
.jc-page h2 { font-size: .875rem; line-height: 1.5; font-weight: 700; }
.jc-page h3 { font-size: .875rem; line-height: 1.5; font-weight: 400; }
.jc-panel, .jc-record, .jc-filter {
  min-width: 0;
  padding: .9375rem;
  background: #fff;
  border-radius: .5rem;
}
.jc-panel, .jc-record { display: grid; align-content: start; gap: .625rem; overflow-wrap: anywhere; }
.jc-record-head, .jc-pricing { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jc-record-head h3 { min-width: 0; }
.jc-status { flex: none; color: var(--jc-accent); font-size: .75rem; font-weight: 400; }
.jc-facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 .625rem; margin: 0; }
.jc-facts dt { color: var(--jc-muted); }
.jc-facts dt, .jc-facts dd { padding: .625rem 0; border-bottom: 1px solid var(--jc-line); font-size: .875rem; }
.jc-facts dt:last-of-type, .jc-facts dd:last-of-type { border-bottom: 0; }
.jc-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.jc-muted, .jc-pricing del { color: var(--jc-muted); }
.jc-error { padding: 11px 14px; border: 1px solid #f0cfcb; border-radius: .5rem; background: #fff5f4; color: #a22626; }
.jc-empty { padding: 36px 14px; text-align: center; color: var(--jc-muted); }
.jc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jc-actions:empty { display: none; }
.jc-button, .jc-link, .jc-entry a { color: var(--jc-accent, #af2c2a); }
.jc-button, .jc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}
.jc-button { padding: .375rem .75rem; min-height: 2rem; background: #fff; border: 1px solid #ddd; border-radius: .9375rem; line-height: 1.5; font-size: .8125rem; color: #666; }
.jc-link { padding: 6px 0; }
.jc-primary { background: linear-gradient(135deg,#ff9500,#ff6b00); border-color: transparent; color: #fff; font-weight: 700; font-size: .9375rem; padding: .75rem 1.875rem; border-radius: 1.5625rem; }
.jc-button:disabled { opacity: .55; cursor: default; }
.jc-page :focus-visible, .jc-entry :focus-visible { outline: 2px solid #ff9500; outline-offset: 3px; }
.jc-header :focus-visible { outline-color: #ff9500; }
.jc-form, .jc-field { display: grid; gap: 10px; min-width: 0; }
.jc-form { gap: 14px; }
.jc-field { gap: 5px; }
.jc-field > span { font-size: .875rem; font-weight: 400; color: #666; }
.jc-field :is(input, select, textarea) {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #eee;
  border-radius: .25rem;
  background: #fff;
  color: var(--jc-text);
  font: inherit;
  font-size: .875rem;
}
.jc-field textarea { resize: vertical; }
.jc-form > .jc-primary { width: 100%; }
.jc-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.jc-filter .jc-field:first-child { grid-column: 1 / -1; }
.jc-payment-parts { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--jc-line); border-radius: .25rem; }
.jc-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jc-products:empty { display: none; }
.jc-product { min-width: 0; overflow: hidden; border-radius: .5rem; background: #fff; color: var(--jc-text); text-decoration: none; }
.jc-cover, .jc-image-empty { background: #f2f2f2; }
.jc-cover { display: block; width: 100%; aspect-ratio: 1 / .9; object-fit: cover; }
.jc-product-caption { display: grid; gap: 4px; padding: 9px; }
.jc-product-caption h2 { font-size: .875rem; font-weight: 400; overflow-wrap: anywhere; }
.jc-price { color: var(--jc-accent); font-variant-numeric: tabular-nums; }
.jc-pricing { justify-content: flex-start; }
.jc-pricing .jc-price { font-size: 1.25rem; }
.jc-product-layout { display: grid; gap: 12px; }
.jc-gallery { display: grid; align-content: start; gap: 8px; min-width: 0; }
.jc-hero { overflow: hidden; border-radius: .5rem; }
.jc-product-hero { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.jc-gallery video { width: 100%; max-height: 400px; background: #151515; border-radius: .5rem; }
.jc-thumbnails { display: flex; gap: 8px; flex-wrap: wrap; }
.jc-thumbnails button { width: 48px; height: 48px; overflow: hidden; padding: 0; border-radius: .25rem; }
.jc-thumbnails button[aria-pressed=true] { border: 2px solid var(--jc-accent); }
.jc-thumbnails img, .jc-thumbnails .jc-image-empty { width: 100%; height: 100%; object-fit: cover; }
.jc-description { white-space: pre-line; }
.jc-description + img, .jc-panel > img { max-width: 100%; border-radius: .25rem; }
.jc-product-row { display: flex; gap: 10px; align-items: center; }
.jc-product-row > :is(img, .jc-image-empty) { flex: 0 0 5rem; width: 5rem; height: 5rem; border-radius: .25rem; object-fit: cover; }
.jc-product-row > div:not(.jc-image-empty) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jc-receipts { display: flex; flex-wrap: wrap; gap: 16px; }
.jc-receipts figure { margin: 0; text-align: center; }
.jc-qr { display: block; width: min(140px, 100%); height: auto; }
.jc-proof { display: block; max-width: min(220px, 100%); max-height: 260px; object-fit: contain; }
.jc-gateway { padding-top: 10px; }
/* Entries use the original profile service rows, inside .main (not above its negative margin). */
.jc-entry { box-sizing: border-box; background: #fff; border-radius: .5rem; margin: .625rem .9375rem; padding: 0 .625rem; }
.jc-entry a { display: flex; align-items: center; gap: .625rem; min-height: 3.125rem; color: #333; font: inherit; font-size: .875rem; text-decoration: none; border-bottom: 1px solid #f5f5f5; }
.jc-entry a:last-child { border-bottom: 0; }
.jc-entry a::after { content: ""; flex: 0 0 auto; width: .375rem; height: .375rem; border: solid #999; border-width: 1px 1px 0 0; transform: rotate(45deg); margin-left: auto; margin-right: .25rem; }
.jc-entry-icon { width: 1.4375rem; height: 1.4375rem; object-fit: contain; }
.jc-entry[data-commerce-entry=profile] { margin: .625rem 0 0; padding: 0 .9375rem; }
.jc-entry[data-commerce-entry=home] { margin: .625rem; padding: 0 .9375rem; border-radius: .75rem; }
.jc-entry[data-commerce-entry=home] a { font-size: 1rem; font-weight: 700; }
.jc-entry[data-commerce-entry=orders] { display: flex; gap: 1.25rem; margin: .625rem; }
.jc-entry[data-commerce-entry=orders] a { flex: 1; border: 0; }
.jc-entry[data-commerce-entry=profile] + * { margin-top: .625rem; }
.jc-header h1 { font-size: 16px; }
.jc-button:disabled { background: #ccc; color: #fff; border-color: #ccc; opacity: 1; cursor: not-allowed; }
.jc-record-head { flex-wrap: wrap; }
.jc-record-head h3 { flex: 1 1 8rem; }
.jc-field :is(input,select,textarea) { font-family: inherit; line-height: 1.5; }
.jc-field input[type=file] { font-size: .8125rem; padding: .5rem; }
.jc-field input::file-selector-button { font: inherit; color: #666; background: #f5f5f5; border: 0; border-radius: .25rem; padding: .375rem .625rem; margin-right: .625rem; }
.jc-product-row { align-items: flex-start; }
.jc-empty { font-size: .875rem; color: #999; }

/* Match the original confirm-order section rows. Only new forms use these selectors. */
.jc-form { gap: 0; }
.jc-field { grid-template-columns: minmax(4.375rem, .8fr) minmax(0, 2fr); align-items: center; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid #f5f5f5; }
.jc-field:last-child { border-bottom: 0; }
.jc-field :is(input,select) { border: 0; padding: .375rem 0; min-height: 2rem; background: transparent; text-align: right; }
.jc-field:has(textarea, input[type=file]) { grid-template-columns: minmax(0,1fr); }
.jc-field textarea { min-height: 3.75rem; }
.jc-form > .jc-primary { margin-top: .9375rem; }
.jc-filter { gap: .625rem; }
.jc-filter .jc-field { grid-template-columns: minmax(0,1fr); padding: 0; border: 0; }
.jc-filter .jc-field :is(input,select) { padding: .5rem .625rem; background: #f5f5f5; border-radius: .25rem; text-align: left; }
.jc-filter > .jc-primary { margin-top: 0; padding: .5rem .9375rem; font-size: .875rem; }