/* 点餐视图沿用现有按钮、字体和颜色，列表保持原位更新。 */
/* V2 六类卡片独立成帧，沿用聊天页浅色主题与原型的信息层级。 */
/* 原注释保留：本轮以需求原图覆盖卡片主题，使用蓝灰材质、白字和大圆角。 */
/* 所有点餐卡片统一为紧凑尺寸，字号保持固定，仅在窄屏调整布局。 */
.foods-view {
    --foods-muted: #adb9d3;
    --foods-rule: rgba(211, 220, 244, .15);
    --foods-green: #13d38b;
    width: min(100%, 420px); min-width: 0; flex-shrink: 0; margin: 8px 0;
    padding: 16px; border: 0; border-radius: 16px;
    background: linear-gradient(155deg, #414969 5%, #586fa3 76%, #514c70);
    color: #f6f7fc; font-size: 14px; line-height: 1.5; letter-spacing: 0;
    overflow-wrap: anywhere; position: relative;
}
.foods-cart, .foods-order { background: linear-gradient(155deg, #414969 5%, #5b72a6 100%); }
.foods-delivery, .foods-order-details-card, .foods-history-card { background: #363b4c; }
/* 第 1.6 节原图使用横向订单详情结构，窄屏时按列顺序折行。 */
.foods-delivery { width: min(100%, 640px); }
.foods-delivery .foods-header { justify-content: flex-start; border-bottom: 0; }
.foods-delivery .foods-header > button { margin-left: auto; }
.foods-delivery-destination { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; font-size: 14px; }
.foods-delivery-destination > strong { white-space: nowrap; font-size: 16px; }
.foods-delivery-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; padding-top: 6px; }
.foods-delivery-grid .foods-facts { font-size: 14px; }
.foods-delivery-grid .foods-facts > div { grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
.foods-delivery-items > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; }
.foods-delivery-items > div > span:last-child { flex-shrink: 0; }
.foods-view[hidden] { display: none; }
.foods-view fieldset { border: 0; min-width: 0; padding: 0; margin: 0; }
.foods-view h3 { font-size: 18px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 8px; }
.foods-view h4 { font-size: 16px; font-weight: 400; margin: 0; }
.foods-view strong { font-weight: 500; }
.foods-view p { margin: 4px 0; line-height: 1.5; }
.foods-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.foods-symbol { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
.foods-header h3 > .foods-symbol { width: 24px; height: 24px; flex-basis: 24px; }
.foods-header, .foods-store-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.foods-header { padding-bottom: 10px; border-bottom: 1px solid var(--foods-rule); margin-bottom: 10px; }
.foods-brand-header { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--foods-rule); }
.foods-brand-main { flex: 1; min-width: 0; }
.foods-brand-main > strong { font-size: 16px; white-space: normal; }
.foods-brand-header .foods-brand-logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; }
.foods-brand-store { min-width: 0; max-width: 40%; text-align: right; font-size: 12px; }
.foods-brand-store p { margin: 0; }
.foods-text-button { display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; font: inherit; color: inherit; border: 0; border-bottom: 1px solid var(--foods-rule); background: transparent; padding: 0 0 3px; text-align: right; cursor: pointer; max-width: 100%; }
.foods-text-button .foods-symbol { color: var(--foods-muted); width: 14px; height: 14px; flex-basis: 14px; }
.foods-muted { color: var(--foods-muted); font-size: 12px; }
.foods-success { color: var(--foods-green); }
.foods-price { font-size: 16px; color: inherit; font-weight: 500; }
.foods-product-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.foods-product-price del { font-size: 12px; color: var(--foods-muted); }
.foods-image { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; background: transparent; border-radius: 0; }
.foods-missing { display: grid; place-items: center; color: var(--foods-muted); font-size: 14px; }
.foods-products, .foods-lines, .foods-specs { min-width: 0; max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(225,232,250,.3) transparent; }
.foods-products { max-height: 380px; }
/* 分类控件在窄屏内收缩，未知库存提示只占菜单一行。 */
.foods-menu-filter { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.foods-menu-filter select { min-width: 0; max-width: 100%; flex: 1; }
.foods-menu-availability { margin: 8px 0 12px; }
/* 暂存入口为紧凑一行，窄屏允许换行且不展示失效报价。 */
/* 需求修订：已移除暂存摘要，购物车统一复用订单确认卡样式。 */
.foods-menu-category { margin: 0; padding: 0; border: 0; background: transparent; }
.foods-menu-category > h4 { color: var(--foods-muted); font-size: 13px; margin: 10px 0 6px; }
.foods-menu-category:first-child > h4 { margin-top: 0; }
.foods-product { padding: 8px 0; min-width: 0; }
.foods-product-select { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.foods-product-main { flex: 1; min-width: 0; display: block; }
.foods-product-main > strong { display: block; font-size: 16px; }
.foods-description { display: block; margin: 4px 0; }
.foods-detail-heading { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.foods-detail-heading > div { min-width: 0; flex: 1; }
.foods-detail-heading h4 { font-size: 16px; font-weight: 500; }
.foods-detail-heading > div > p:not(.foods-product-price) { color: var(--foods-muted); font-size: 12px; }
.foods-spec-group { padding: 0; margin: 12px 0; border: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.foods-spec-group > h4 { flex: 0 0 100%; color: var(--foods-muted); font-size: 14px; }
.foods-spec-option { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; width: calc((100% - 16px) / 3); padding: 6px 8px; min-height: 36px; border: 1px solid #91a1c6; border-radius: 999px; background: rgba(187,203,239,.16); color: #e7edfa; cursor: pointer; font-size: 14px; }
.foods-spec-option:has(input:checked) { border-color: #498acf; color: #53afff; background: rgba(29,141,242,.25); }
.foods-spec-option:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.foods-spec-option > input[type=radio], .foods-spec-option > input[type=checkbox] { position: absolute; width: 100%; height: 100%; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.foods-spec-option:has(input:focus-visible) { outline: 2px solid #b9deff; outline-offset: 3px; }
.foods-spec-group .foods-spec-group { width: 100%; padding-left: 16px; border-left: 1px solid var(--foods-rule); }
.foods-store-title { margin-bottom: 6px; }
.foods-store { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--foods-rule); }
.foods-store-dot { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid #8999bd; border-radius: 50%; }
.foods-store[data-selected=true] .foods-store-dot { background: var(--foods-green); border-color: var(--foods-green); }
.foods-store-main { flex: 1; min-width: 0; }
.foods-store-heading { align-items: baseline; }
.foods-store-heading > strong { font-size: 16px; }
.foods-store-heading > span { font-size: 12px; flex-shrink: 0; }
.foods-store-heading > p { min-width: 0; }
.foods-store-modes { font-size: 12px; }
.foods-store-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foods-view .foods-map { color: var(--foods-muted); text-decoration: none; display: inline-flex; align-items: center; padding: 4px; }
.foods-cart-store { max-width: 45%; text-align: right; }
.foods-cart-store > span { display: block; }
/* 确认卡先呈现商品与费用，方式和收货信息紧随其后。 */
.foods-cart > fieldset { display: flex; flex-direction: column; }
.foods-cart .foods-context { order: 4; }
.foods-cart .foods-address-summary { order: 5; }
.foods-cart footer { order: 6; }
.foods-cart .foods-feedback { order: 7; }
.foods-line { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border: 0; }
.foods-line-main { flex: 1; min-width: 0; }
.foods-candidates { display: grid; gap: 8px; margin-top: 10px; min-width: 0; }
.foods-candidates .foods-product-select { width: 100%; min-width: 0; text-align: left; }
.foods-candidates .foods-product-main { min-width: 0; overflow-wrap: anywhere; }
.foods-candidates .foods-image { width: 44px; height: 44px; flex: 0 0 44px; }
.foods-line-main > strong { font-size: 16px; }
.foods-line > strong { white-space: nowrap; font-size: 16px; }
.foods-stepper { display: inline-flex; align-items: center; gap: 2px; }
.foods-actions, .foods-context { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.foods-line .foods-actions { gap: 4px; margin-top: 6px; }
.foods-totals { margin: 8px 0; border-top: 1px solid var(--foods-rule); }
.foods-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--foods-muted); }
.foods-totals dd { margin: 0; text-align: right; color: #f6f7fc; }
.foods-totals > div:last-child { border-top: 1px solid var(--foods-rule); color: #f6f7fc; padding-top: 10px; }
.foods-totals > div:last-child dd, .foods-facts .foods-price { color: #ffc26c; font-size: 24px; line-height: 1.2; }
.foods-facts { margin: 0; }
.foods-facts > div { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: baseline; gap: 12px; padding: 8px 0; }
.foods-facts dt { color: var(--foods-muted); }
.foods-facts dd { margin: 0; text-align: right; min-width: 0; }
.foods-take-code { font-size: 22px; }
.foods-pickup-entry { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--foods-border); }
.foods-pickup-entry p, .foods-take-code, .foods-after-sales { overflow-wrap: anywhere; }
.foods-view footer { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--foods-rule); }
.foods-view .btn { border: 0; border-radius: 999px; padding: 6px 12px; height: auto; min-height: 36px; max-width: 100%; font-size: 13px; line-height: 1.4; white-space: normal; color: #ecf2ff; background: rgba(198,211,243,.14); box-shadow: none; }
.foods-view .btn-primary { color: #85caff; background: rgba(32,138,229,.28); border: 1px solid rgba(96,170,243,.65); }
.foods-view .btn:hover:not(:disabled) { background: rgba(173,206,255,.28); }
.foods-view .foods-icon-button { width: 32px; min-height: 32px; height: 32px; flex: 0 0 32px; padding: 6px; border: 0; background: transparent; }
.foods-icon-button svg { width: 20px; height: 20px; }
.foods-view :is(button,input,select,a):focus-visible { outline: 2px solid #b9deff; outline-offset: 3px; }
.foods-view button:disabled, .foods-view fieldset:disabled button { opacity: .4; cursor: not-allowed; }
.foods-view input[type=number] { width: 32px; height: 32px; padding: 2px; min-width: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: center; font: inherit; font-size: 14px; }
.foods-view select { max-width: 100%; height: 32px; color: #ecf2ff; background: #52618a; border: 1px solid #8f9fc1; border-radius: 4px; font-size: 13px; padding: 2px 6px; }
.foods-context { margin: 8px 0; font-size: 13px; color: var(--foods-muted); }
/* 详细地址可能较长，保持地址控件在手机卡片宽度内。 */
.foods-context > label { min-width: 0; max-width: 100%; }
.foods-modes { display: flex; gap: 4px; }
.foods-modes button { border: 0; border-radius: 999px; padding: 4px 10px; min-height: 32px; font-size: 13px; color: var(--foods-muted); background: transparent; cursor: pointer; }
.foods-modes button[aria-pressed=true] { color: #85caff; background: rgba(32,138,229,.28); }
.foods-address-summary { font-size: 13px; }
.foods-quantity-label { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; color: var(--foods-muted); }
.foods-error, .foods-feedback { color: #ffcdce; font-size: 13px; }
.foods-feedback:empty { display: none; }
.foods-empty { color: var(--foods-muted); padding: 12px 0; }
.foods-dismiss { position: absolute; top: -8px; right: -8px; }
.foods-dismiss .btn { background: #414969; width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.foods-history-row { padding: 10px 0; border-bottom: 1px solid var(--foods-rule); }
.foods-qr { margin: 10px 0; }
.foods-qr img, .foods-qr canvas { max-width: 100%; }
/* 门店卡片按加油卡片的信息密度排布，固定紧凑字号，长店名与地址完整换行。 */
.foods-view.foods-stores-card { width: min(100%, 360px); padding: 12px; border-radius: 16px; font-size: 13px; }
.foods-stores-card .foods-brand-header { gap: 8px; padding-bottom: 12px; margin-bottom: 10px; }
.foods-stores-card .foods-brand-header .foods-brand-logo { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
.foods-stores-card .foods-brand-main > strong { font-size: 16px; white-space: normal; }
.foods-stores-card .foods-brand-main .foods-muted, .foods-stores-card .foods-muted { font-size: 12px; }
.foods-stores-card .foods-brand-store { max-width: 35%; font-size: 12px; }
.foods-stores-card .foods-text-button { gap: 4px; }
.foods-stores-card .foods-store-title { margin-bottom: 2px; }
.foods-stores-card h4 { font-size: 14px; }
.foods-stores-card .foods-store { gap: 8px; padding: 10px 0; }
.foods-stores-card .foods-store:last-child { border-bottom: 0; padding-bottom: 0; }
/* 替代组合名称与报价允许换行，窄屏不挤压商品或支付按钮。 */
.foods-alternatives > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: 10px 12px; border: 1px solid var(--border-color, #d1d5db); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
/* 待确认行与能力限制按原卡片宽度换行，不挤占数量和规格控件。 */
.foods-line-choices { display: grid; gap: 8px; margin: 12px 0; }
.foods-line-choices > p { margin: 0; }
.foods-capability-reason { display: block; flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; color: var(--foods-muted); }
.foods-stores-card .foods-store-dot { width: 12px; height: 12px; flex-basis: 12px; }
.foods-stores-card .foods-store-heading { gap: 4px 8px; flex-wrap: nowrap; }
.foods-stores-card .foods-store-heading > strong { min-width: 0; font-size: 14px; }
.foods-stores-card .foods-store-heading > span { font-size: 12px; flex-shrink: 0; }
.foods-stores-card .foods-store-modes { font-size: 11px; }
.foods-stores-card p { margin: 3px 0; }
@media (max-width: 520px) {
    /* 图片与字号沿用桌面尺寸，仅压缩边距、将配送详情改为单列。 */
    .foods-view { padding: 12px; }
    .foods-brand-store { max-width: 38%; }
    .foods-store-heading { gap: 8px; flex-wrap: wrap; }
    .foods-store-heading > span { flex-shrink: 1; }
    .foods-line { flex-wrap: wrap; }
    .foods-line > strong { margin-left: auto; }
    .foods-line .foods-actions { margin-left: -68px; padding-top: 4px; }
    .foods-delivery-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
}