/* Customer-only appearance tokens: white surfaces, quiet separators, one brand accent. */
html[data-storefront-appearance="true"] {
  --paper-50: #ffffff;
  --paper-100: #f5f5f5;
  --paper-200: #ededed;
  --ink-900: #232528;
  --ink-700: #45484d;
  --ink-600: #686c72;
  --ink-400: #8b9097;
  --line-200: #e8e9eb;
  --line-300: #d5d8dc;
  --focus: 0 0 0 3px rgb(var(--appearance-accent-rgb, 181 58 50) / 22%);
  --shadow-1: 0 1px 2px rgb(20 24 28 / 4%);
  --shadow-2: 0 8px 24px rgb(20 24 28 / 10%);
  --shadow-3: 0 18px 48px rgb(20 24 28 / 18%);
  --appearance-card-pad: .75rem;
  --appearance-gap: .625rem;
  --appearance-row-pad: .625rem;
  --appearance-image-min: 56px;
  --appearance-image-max: 96px;
  --appearance-desktop-image: 112px;
  --space-card: var(--appearance-card-pad);
  --space-gap: var(--appearance-gap);
}
html[data-appearance-density="comfortable"] {
  --appearance-card-pad: 1rem;
  --appearance-gap: .875rem;
  --appearance-row-pad: .875rem;
  --appearance-image-min: 64px;
  --appearance-image-max: 112px;
  --appearance-desktop-image: 128px;
}
html[data-appearance-density="spacious"] {
  --appearance-card-pad: 1.25rem;
  --appearance-gap: 1.125rem;
  --appearance-row-pad: 1.125rem;
  --appearance-image-min: 72px;
  --appearance-image-max: 128px;
  --appearance-desktop-image: 144px;
}
[data-storefront-appearance] .customer-app { background: var(--paper-100); }
[data-storefront-appearance] .customer-app :is(.site-header, .tabbar) { background: var(--paper-50); }
/* Merchant copy can be longer than the original demo name without widening the page. */
.customer-app :is(.site-header, .preview-header) .brand { max-width: min(100%, 20rem); }
.customer-app :is(.site-header, .preview-header) .brand-text { min-width: 0; }
.customer-app :is(.site-header, .preview-header) .brand-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-app .brand-mark { position: relative; overflow: hidden; }
.customer-app .brand-mark[data-logo-length="2"] { font-size: .875rem; }
.customer-app .brand-mark:is([data-logo-length="3"], [data-logo-length="4"]) { font-size: .625rem; }
.customer-app .brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; background: var(--paper-50); }
.customer-app .brand-mark img[data-loaded="true"] { opacity: 1; }
.customer-app .store-intro-copy > * { overflow-wrap: anywhere; }
.customer-app .store-intro-copy > [hidden] { display: none !important; }
[data-storefront-appearance] .customer-app .menu-layout.variant-b {
  --menu-red: var(--brand-600);
  --menu-red-dark: var(--brand-700);
  --menu-soft: var(--brand-50);
  --menu-paper: var(--paper-50);
  --menu-bg: var(--paper-50);
  --menu-rail: var(--paper-100);
  --menu-cart: var(--paper-50);
  --menu-ink: var(--ink-900);
  --menu-muted: var(--ink-600);
  --menu-line: var(--line-200);
  --menu-selected: var(--brand-50);
  --menu-gap: var(--appearance-gap);
}
[data-storefront-appearance] .customer-app .menu-layout.variant-b :is(.store-intro, .product, .cart-panel) { box-shadow: none; }
[data-storefront-appearance] .customer-app .menu-layout.variant-b :is(.product:hover, .category-item:hover) { border-color: var(--line-300); box-shadow: none; transform: none; }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .search:focus-within { border-color: var(--brand-600); box-shadow: var(--focus); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .services .icon { color: var(--ink-600); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item[aria-pressed="true"] { background: var(--brand-50); border-color: transparent; color: var(--brand-700); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item[aria-pressed="true"] .category-secondary { color: var(--brand-700); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .category-icon { background: transparent; }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item:hover .category-icon { background: transparent; }
[data-storefront-appearance] .customer-app .menu-layout.variant-b .product .price { color: var(--ink-900); }
[data-storefront-appearance] .customer-app .product .flags .tag.tone-red { --tone: var(--ink-700); --tone-bg: var(--paper-50); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b + .cart-bar { background: var(--paper-50); border-color: var(--line-200); }
[data-storefront-appearance] .customer-app .menu-layout.variant-b + .cart-bar :is(.bag, .button.primary) { background: var(--brand-600); border-color: var(--brand-600); }
[data-storefront-appearance] .customer-app .cart-bar .bag .nav-count { background: var(--ink-900); }
[data-storefront-appearance] .customer-app:has(.orders-page) {
  --orders-canvas: var(--paper-100); --orders-surface: var(--paper-50); --orders-hover: var(--paper-100); --orders-line: var(--line-200);
  --orders-inset: var(--appearance-card-pad); --orders-gap: var(--appearance-gap); --orders-shadow: none;
}
/* Keep success/error meaning, but avoid decorative multicolour cards and chips. */
[data-storefront-appearance] .customer-app :is(.tag, .badge).tone-teal,
[data-storefront-appearance] .customer-app :is(.tag, .badge).tone-indigo,
[data-storefront-appearance] .customer-app :is(.tag, .badge).tone-blue { --tone: var(--ink-700); --tone-bg: var(--paper-100); --tone-line: var(--line-200); }
[data-storefront-appearance] .customer-app :is(.callout.tone-info, .callout.tone-neutral) { --tone: var(--ink-600); --tone-bg: var(--paper-100); --tone-line: var(--line-200); }
[data-storefront-appearance] .customer-app .card:not(.links-card, .chat-inbox, .display-settings) { padding: var(--appearance-card-pad); }
[data-storefront-appearance] .customer-app :is(.account-grid, .orders-list, .address-list) { gap: var(--appearance-gap); }
[data-storefront-appearance] .customer-app :is(.address-row, .chat-conversation) { padding-block: var(--appearance-row-pad); }
[data-storefront-appearance] .customer-app .order-detail-dialog { --order-inset: var(--appearance-card-pad); }
[data-storefront-appearance] .customer-app .order-detail-dialog .dialog-body { gap: var(--appearance-gap); }
[data-storefront-appearance] .customer-app :is(button, .button, select, .header-user) { min-height: 44px; }
/* Device preferences stay stable while the surrounding menu density changes. */
.display-settings {
  --display-surface: #fff; --display-text: var(--ink-900); --display-muted: var(--ink-600);
  --display-line: var(--line-200); --display-control-line: var(--line-300); --display-hover: var(--paper-50);
  --display-focus: var(--brand-600); --display-inset: 1.5rem; --display-gap: 1.5rem;
  --display-space-sm: .5rem; --display-space-md: .75rem;
  --display-body-size: 1rem; --display-note-size: .875rem; --display-title-size: 1.25rem;
  --display-radius: var(--radius); --display-motion: 150ms;
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 55rem;
  gap: var(--display-gap); padding: var(--display-inset); margin-top: var(--appearance-gap, 1rem);
  color: var(--display-text); background: var(--display-surface); border-color: var(--display-line);
}
.account-grid > .display-settings { margin-top: 0; }
.display-settings-head { display: grid; min-width: 0; gap: var(--display-space-sm); }
.display-settings-head h2 { display: flex; min-width: 0; gap: var(--display-space-sm); align-items: center; font-size: var(--display-title-size); font-weight: 600; overflow-wrap: anywhere; }
.display-settings-head h2 .icon { width: 1em; height: 1em; color: var(--display-muted); }
.display-settings-head p, .display-settings-status, .display-settings .hint { color: var(--display-muted); font-size: var(--display-note-size); line-height: 1.6; overflow-wrap: anywhere; }
.display-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--display-gap); }
.display-settings .field { min-width: 0; align-content: start; gap: var(--display-space-sm); }
.display-settings .field > label { color: var(--display-text); font-size: var(--display-body-size); }
.display-settings-control { position: relative; min-width: 0; }
.display-settings select {
  width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-min);
  padding: var(--display-space-md); padding-inline-end: calc(var(--display-space-md) * 4);
  border-color: var(--display-control-line); border-radius: var(--display-radius);
  background: var(--display-surface); color: var(--display-text); font-size: var(--display-body-size);
  transition: border-color var(--display-motion) var(--ease), background-color var(--display-motion) var(--ease);
}
.display-settings-control > .icon { position: absolute; inset-inline-end: var(--display-space-md); top: 50%; transform: translateY(-50%); width: 1em; height: 1em; color: var(--display-muted); pointer-events: none; }
.display-settings select:hover:not(:disabled) { border-color: var(--display-muted); background-color: var(--display-hover); }
.display-settings select:focus-visible, .display-settings .display-settings-reset:focus-visible { outline: 2px solid var(--display-focus); outline-offset: 2px; border-color: var(--display-focus); box-shadow: none; }
.display-settings select:disabled { background-color: var(--display-hover); color: var(--display-muted); }
.display-settings-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--display-space-sm) var(--display-gap); border-top: 1px solid var(--display-line); padding-top: var(--display-space-md); }
.display-settings-status { flex: 1 1 14rem; min-width: 0; }
.display-settings .display-settings-reset { min-height: var(--control-min); min-width: 0; gap: var(--display-space-sm); padding: var(--display-space-md); border-color: var(--display-control-line); background: var(--display-surface); color: var(--display-text); font-size: var(--display-note-size); font-weight: 500; text-align: start; }
.display-settings-reset span { min-width: 0; overflow-wrap: anywhere; }
.display-settings .display-settings-reset:hover:not(:disabled) { background: var(--display-hover); border-color: var(--display-muted); color: var(--display-text); }
.display-settings .display-settings-reset:active:not(:disabled) { background: var(--display-hover); border-color: var(--display-focus); }
[data-theme="dark"] .display-settings, .display-settings[data-theme="dark"] {
  --display-surface: #222426; --display-text: #F5F5F5; --display-muted: #B8BDC3;
  --display-line: #3A3E42; --display-control-line: #636B74; --display-hover: #2C3034;
  --display-focus: #E6A29B; color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { .display-settings select, .display-settings-reset { transition: none; } }
@media (max-width: 479px) {
  .display-settings { --display-inset: 1rem; --display-gap: 1.25rem; }
  .display-settings-foot { align-items: flex-start; }
}
@media (min-width: 768px) {
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product { padding: var(--appearance-card-pad); gap: var(--appearance-gap); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product-image { width: clamp(80px, 18cqi, var(--appearance-desktop-image)); margin: 0; }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product-body { padding: 0; }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product-grid { gap: var(--appearance-gap); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item { padding-block: var(--appearance-row-pad); }
}
@media (max-width: 767px) {
  [data-storefront-appearance] .customer-app .page:has(.menu-layout) { background: var(--paper-50); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .store-intro { padding-block: var(--appearance-row-pad); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item { min-height: 64px; padding-block: var(--appearance-row-pad); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .category-item:hover:not([aria-pressed="true"]) { background: var(--paper-200); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product { grid-template-columns: calc(clamp(var(--appearance-image-min), 24cqi, var(--appearance-image-max)) + 12px) minmax(0, 1fr); min-height: 0; }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product-image { width: clamp(var(--appearance-image-min), 24cqi, var(--appearance-image-max)); margin-block: var(--appearance-row-pad); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .product-body { padding-block: var(--appearance-row-pad); }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b :is(.product-grid, .category-products) { gap: 0; }
  [data-storefront-appearance] .customer-app .menu-layout.variant-b .menu-category-title { padding-top: var(--appearance-row-pad); }
  .display-settings-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Preview stays inside its iframe and reuses the customer menu's layout and typography. */
.appearance-preview .page { padding-top: 0; padding-bottom: 1rem; }
.appearance-preview .preview-notice { display: flex; gap: .375rem; align-items: center; justify-content: center; min-height: 32px; padding: .375rem .75rem; color: var(--ink-600); background: var(--paper-100); font-size: var(--text-xs); }
.appearance-preview .preview-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; background: var(--paper-50); border-bottom: 1px solid var(--line-200); }
.appearance-preview .preview-header strong { min-width: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.appearance-preview .preview-header-actions { display: flex; align-items: center; gap: .5rem; color: var(--ink-600); }
.appearance-preview .preview-header .brand { flex: 1 1 0; min-width: 0; gap: .5rem; }
.appearance-preview .preview-header-actions { flex: none; white-space: nowrap; }
.appearance-preview .preview-header .icon { width: 18px; height: 18px; }
.appearance-preview .menu-layout.variant-b { margin-bottom: 0; }
.appearance-preview .menu-layout.variant-b .menu-toolbar,
.appearance-preview .menu-layout.variant-b .cart-panel,
.appearance-preview .menu-layout.variant-b + .cart-bar,
.appearance-preview .menu-layout.variant-b .menu-chat-entry,
.appearance-preview .menu-layout.variant-b .service-payment-info { display: none; }
.appearance-preview .menu-layout.variant-b .category-rail { position: static; max-height: none; }
.appearance-preview .preview-checkout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid var(--line-200); background: var(--paper-50); font-size: var(--text-sm); }
.appearance-preview .preview-checkout .button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  [data-storefront-appearance] .customer-app * { scroll-behavior: auto !important; }
}