/* Jinxin Appliances: shared design tokens and live component primitives. */
:root {
  --brand: #f15a32; --brand-strong: #bd3e1d; --brand-soft: #fff2ec; --brand-border: #f5bda9; --on-brand: #fff;
  --color-heading: #1c2935; --color-text: #334155; --color-muted: #5b6b7e;
  --color-page: #f5f6f4; --color-surface: #fff; --surface-subtle: #f8faf9; --color-border: #e2e8f0;
  --success: #256343; --success-soft: #edf8f1; --warning: #825000; --warning-soft: #fff6e7; --danger: #a82d2d; --danger-soft: #fff0ef; --info: #285f89; --info-soft: #eef6fc;
  --paper: var(--color-page); --white: var(--color-surface); --ink: var(--color-heading); --muted: var(--color-muted); --line: var(--color-border);
  --orange: var(--brand); --orange-dark: var(--brand-strong); --sage: var(--success-soft); --canvas: var(--color-page);
  --accent: var(--brand-strong); --accent-dark: var(--brand-strong); --green: var(--success); --warm: var(--brand-soft);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --heading-page: clamp(24px, 2.2vw, 32px); --heading-section: clamp(20px, 1.8vw, 26px);
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --line-body: 1.65; --line-heading: 1.3;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --content-width: 1440px; --page-gutter: clamp(16px, 3vw, 40px); --control-height: 44px; --site-nav-offset: 52px;
  --radius-input: 8px; --radius: 12px; --radius-card: 14px; --radius-dialog: 16px; --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgb(28 41 53 / 4%); --shadow-md: 0 12px 32px rgb(28 41 53 / 9%); --shadow-dialog: 0 24px 80px rgb(28 41 53 / 20%);
  --focus-ring: #a43b20; --motion-fast: 180ms; --motion-normal: 220ms;
  font-family: var(--font-body); color: var(--color-text); background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: auto; scroll-padding-top: calc(var(--site-nav-offset) + var(--space-4)); }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--line-body); background: var(--paper); color: var(--color-text); }
[hidden] { display: none !important; }
:where(h1,h2,h3,h4) { color: var(--ink); line-height: var(--line-heading); font-weight: var(--weight-semibold); }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:where(button,input,select,textarea) { font-family: inherit; }
:where(button,a,input,select,textarea) { transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast); }
:where(button) { cursor: pointer; }
:where(button):active:not(:disabled) { transform: translateY(1px); }
:where(button,input,select,textarea):disabled { cursor: not-allowed; opacity: .58; }
:where(button)[aria-busy="true"] { cursor: progress; opacity: .85; }
:where(button)[aria-busy="true"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--space-2); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
body main:not(.workspace), body .site-footer, body .site-header { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--page-gutter); }
/* Let page sections shrink inside both browser panes and ordinary viewports. */
body main:not(.workspace), .site-header, .shopping-hub { min-width: 0; }
:is(.orders-page,.consult-main,.inquiries-page,.catalog-section) > * { min-width: 0; max-width: 100%; }
body main:not(.workspace) { padding-top: var(--space-6); padding-bottom: var(--space-8); }
body .site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: 0; }
.brand-mark { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-input); }
.top-note { min-height: 30px; height: auto; padding: var(--space-1) var(--page-gutter); color: var(--color-text); background: var(--surface-subtle); font-size: var(--text-xs); letter-spacing: 0; }
body :is(.orders-heading,.favorites-heading,.inquiries-heading,.consult-heading,.cart-heading,.section-heading,.page-heading) { margin-bottom: var(--space-5); gap: var(--space-4); }
body :is(.orders-heading,.favorites-heading,.inquiries-heading,.consult-heading,.cart-heading,.page-heading) h1 { font-size: var(--heading-page); margin: var(--space-2) 0; line-height: var(--line-heading); letter-spacing: -.5px; }
body .section-heading h2 { font-size: var(--heading-section); margin-block: var(--space-2); }
body :is(.orders-heading,.favorites-heading,.inquiries-heading,.consult-heading,.cart-heading,.page-heading) p { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-sm); color: var(--muted); }
.eyebrow { font-size: var(--text-xs); letter-spacing: 1.4px; }
.muted, .card-description, .detail-model, .consult-footnote { color: var(--muted); }
:is(.primary-button,.button.primary,.customer-login) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-input); background: var(--brand-strong); color: var(--on-brand); font-size: var(--text-sm); font-weight: var(--weight-semibold); box-shadow: none; text-decoration: none; }
:is(.primary-button,.button.primary,.customer-login):hover:not(:disabled) { background: var(--ink); }
:is(.secondary-button,.button.secondary,.light-button) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--white); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
:is(.secondary-button,.button.secondary,.light-button):hover:not(:disabled) { background: var(--surface-subtle); border-color: var(--color-muted); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea) { color: var(--ink); }
:is(.field,.profile-field,.profile-form,.account-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea), .message-form textarea { border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--white); padding: var(--space-3); font-size: var(--text-sm); color: var(--ink); }
:where(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
:where(input,textarea)[readonly] { background: var(--surface-subtle); }
:where(input,textarea,select)[aria-invalid="true"] { border-color: var(--danger); }
:is(.catalog-controls,.cart-row,.cart-toolbar,.cart-summary,.cart-address-panel,.personal-panel,.account-card,.order-card,.favorite-card,.form-panel,.stat-card,.catalog-panel,.consult-workspace,.consultation-workspace) { border-color: var(--line); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-sm); }
:is(.catalog-controls,.cart-toolbar) { padding: var(--space-4); }
.product-grid { gap: var(--space-5); }
.product-card { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow var(--motion-normal), transform var(--motion-normal); }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-image, .favorite-image { aspect-ratio: 1 / 1; border-radius: var(--radius-input); background: var(--surface-subtle); }
.card-info { padding: var(--space-4) var(--space-1) var(--space-1); }
.card-info h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink); line-height: 1.5; }
.card-description { font-size: var(--text-sm); }
.card-price, .detail-price { color: var(--brand-strong); }
.card-bottom { border-color: var(--line); }
.image-wrapper img, .favorite-image img, .cart-product-image, .order-item-image { object-fit: contain; }
:is(.tiny-tag,.tag,.shipping-label,.order-status,.inquiry-status-badge,.product-status) { border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); }
:is(.order-status,.inquiry-status-badge).pending, .order-status.awaiting_payment, .order-status.unpaid { background: var(--warning-soft); color: var(--warning); }
:is(.order-status,.inquiry-status-badge).paid, .order-status.completed, .inquiry-status-badge.won, .product-status.published { background: var(--success-soft); color: var(--success); }
.order-status.cancelled { background: var(--surface-subtle); color: var(--muted); }
.order-status.shipped, .order-status.in_transit, .order-status.preparing { background: var(--info-soft); color: var(--info); }
:is(.empty-state,.loading-state,.orders-filter-empty,.inquiry-empty) { border: 1px dashed var(--line); border-radius: var(--radius-card); padding: var(--space-10) var(--space-6); background: var(--white); color: var(--muted); text-align: center; }
:is(.empty-state,.inquiry-empty) h2, :is(.empty-state,.inquiry-empty) h3 { color: var(--ink); font-size: var(--text-lg); }
:is(.form-error,.orders-error,.favorites-error,.cart-error,.consult-status.error,.send-status,.personal-message:not(.success),.consultation-error) { color: var(--danger); }
:is(.personal-message,.account-message,.inquiry-form-message).success { color: var(--success); }
:is(.orders-error,.favorites-error,.cart-error,.consult-status.error,.consultation-error) { background: var(--danger-soft); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); }
:is(.toast,#toast,#cart-toast,#favorites-toast) { background: var(--ink); color: var(--on-brand); border-radius: var(--radius-input); box-shadow: var(--shadow-md); font-size: var(--text-sm); line-height: var(--line-body); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
dialog { color: var(--color-text); border: 1px solid var(--line); border-radius: var(--radius-dialog); background: var(--white); box-shadow: var(--shadow-dialog); max-width: calc(100vw - var(--space-8)); max-height: calc(100dvh - var(--space-8)); }
dialog::backdrop { background: rgb(28 41 53 / 42%); }
.dialog-close { min-width: var(--control-height); min-height: var(--control-height); }
.hero { min-height: 350px; margin: 0; padding: var(--space-8); border-radius: var(--radius-dialog); background: var(--white); }
.hero h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.25; }
.hero-description { color: var(--muted); }
.benefits { margin-top: var(--space-5); padding-block: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
.catalog-section { padding-top: var(--space-8); scroll-margin-top: var(--space-4); }
.catalog-controls .search-sort { margin-left: auto; }
.how-to-section { padding-block: var(--space-8); }
.contact-strip { margin-top: var(--space-5); background: var(--brand-soft); border-radius: var(--radius-card); }
.detail-layout { padding: var(--space-8); }
.detail-info h2 { font-size: var(--heading-page); }
.merchant-info-card { border-color: var(--line); background: var(--surface-subtle); border-radius: var(--radius-card); }
.cart-summary { background: var(--brand-soft); }
.customer-menu { background: var(--white); border-color: var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-md); }
.customer-menu-item:hover { background: var(--brand-soft); }
.account-card { box-shadow: var(--shadow-sm); }
/* Front and merchant layouts share primitives, not sidebar widths. */
.admin-shell, .workspace { background: var(--canvas); }
body .view { padding-top: var(--space-6); }
body .page-heading { margin-bottom: var(--space-5); }
body .stat-grid { margin-bottom: var(--space-5); gap: var(--space-4); }
body .stat-card { padding: var(--space-5); }
body .product-row { padding-block: var(--space-4); }
body .panel-heading { padding: var(--space-5); }
body .form-content { padding: var(--space-5); }
:where([id]) { scroll-margin-top: var(--space-3); }
.ui-confirm-dialog { width: min(440px, calc(100vw - var(--space-8))); padding: var(--space-8); }
.ui-confirm-dialog h2 { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.ui-confirm-dialog p { color: var(--muted); line-height: var(--line-body); }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
.card-shopping-actions button:hover:not(:disabled), .favorite-toggle:hover:not(:disabled) { border-color: var(--brand-border); background: var(--brand-soft); }
.conversation-heading p, .conversation-product-info small, .message-meta, .thread-item-preview, .thread-item-time, .composer-bottom > span { color: var(--muted); font-size: var(--text-xs); }
.thread-item-title, .conversation-product-info strong, .message-bubble { font-size: var(--text-sm); }
.composer-bottom .primary-button { min-height: var(--control-height); font-size: var(--text-sm); }
@media (min-width: 681px) {
  .consult-workspace { min-height: 440px; height: clamp(440px, calc(100dvh - var(--shell-stack-height, 140px) - 140px), 760px); }
}
@media (max-width: 760px) {
  body main:not(.workspace) { padding-top: var(--space-5); }
  .hero { min-height: auto; padding: var(--space-6); }
  .hero h1 { font-size: 36px; }
  .product-grid { gap: var(--space-3); }
  .product-card { padding: var(--space-2); }
  .card-info h3 { font-size: var(--text-sm); }
  .detail-layout { padding: var(--space-5); }
  body .view { padding-top: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}