/* 家常菜点餐系统 · 用户端页面样式（依赖 base.css 的变量与组件类） */
:root {
  --cart-bar-bg: #2b2118;
  --cart-bar-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cart-bar-bg: #3b302a; }
}
:root[data-theme="dark"] { --cart-bar-bg: #3b302a; }

/* 扩大触摸区域：视觉尺寸不变，命中区域外扩到 ≥44px */
.hit { position: relative; }
.hit::after { content: ""; position: absolute; inset: -4px; }

/* 页面骨架：底部留出 tabbar（以及购物车条）的高度 */
.page { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 24px); }
body.has-cart .page { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--cart-bar-h) + 32px); }
body.has-cart .toast-host { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--cart-bar-h) + 24px); }

/* 弹层打开时锁定 body 滚动（top 由 JS 写入当前滚动位置） */
body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }

/* ---------- 顶栏 ---------- */
.topbar .back {
  flex: 0 0 auto; width: 36px; height: 36px; margin-left: -8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text); font-size: 30px; line-height: 1; padding-bottom: 4px;
}
.topbar .back:active { background: var(--surface-2); }
.topbar h1 { flex: 0 0 auto; white-space: nowrap; }
.topbar .search { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.topbar .search-ico { font-size: 14px; opacity: 0.7; }
.topbar .search input { font-size: 16px; } /* ≥16px：iOS Safari 聚焦时不会整页放大 */
.topbar .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23a3958a'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- 分类芯片（吸顶） ---------- */
.chips-wrap {
  position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 10;
  margin: 0 -16px; padding: 0 16px; background: var(--bg);
}
.chips-wrap .chips { padding: 10px 0; }
.chip { min-height: 36px; cursor: pointer; }
.chip.active { font-weight: 600; }
.chip-skel { width: 64px; height: 36px; border-radius: var(--radius-pill); flex: 0 0 auto; }

/* ---------- 谁在点菜 ---------- */
.member-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 0; }
.member-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 600; box-shadow: var(--shadow); max-width: 70%;
}
.member-pill .member-ico { font-size: 18px; line-height: 1; }
.member-pill #member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-pill .caret { color: var(--text-3); font-size: 12px; }
.member-pill.none { color: var(--primary); border-color: var(--primary); }
.member-prefs { color: var(--primary); }
.member-list { display: flex; flex-direction: column; gap: 8px; }
.member-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left;
}
.member-row.active { border-color: var(--primary); background: var(--primary-soft); }
.member-row .avatar { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.member-row .who { flex: 1 1 auto; min-width: 0; }
.member-row .who b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.member-row .who span { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row .tick { color: var(--primary); font-weight: 700; flex: 0 0 auto; }
.member-add { display: flex; gap: 8px; margin-top: 12px; }
.member-add .input { font-size: 16px; }
.member-add .btn { flex: 0 0 auto; }
.sheet-member .help, .sheet-prefs .help { display: block; margin-top: 10px; line-height: 1.5; }

/* 忌口 / 喜好 表单 */
.sheet-prefs .seg { display: flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); }
.sheet-prefs .seg button {
  flex: 1; min-height: 38px; padding: 0 6px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.sheet-prefs .seg button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.pref-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-chips:empty { display: none; }
.pref-chips .chip { min-height: 38px; cursor: pointer; }
.pref-chips .chip.soft.active { background: var(--accent-soft); color: #9a5f0a; border-color: var(--accent); }
.pref-chips .chip .x { margin-left: 2px; color: var(--text-3); }
.pref-push { padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.pref-push > label { color: var(--text); }
.pref-push .help { margin-top: 2px; }
.sheet-prefs .input { font-size: 16px; }
.sheet-prefs .sheet-foot .btn { flex: 1; }
.sheet-prefs .sheet-foot .grow { flex: 2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pref-chips .chip.soft.active { color: var(--accent); } }
:root[data-theme="dark"] .pref-chips .chip.soft.active { color: var(--accent); }

/* 卡片上的忌口 / 辣 / 喜好小标 */
.flag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; vertical-align: 2px;
  font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.flag-soft { background: var(--accent-soft); color: #9a5f0a; }
.flag-spicy { background: var(--danger-soft); color: var(--danger); }
.flag-like { background: var(--primary-soft); color: var(--primary); }
.flag-other { background: var(--surface-2); color: var(--text-3); font-weight: 500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flag-soft { color: var(--accent); } }
:root[data-theme="dark"] .flag-soft { color: var(--accent); }
.hidden-note {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 13px;
}
.hidden-note button { border: 0; background: none; color: var(--primary); font-size: 13px; font-weight: 600; min-height: 32px; padding: 0 4px; }

/* 购物车：谁点的 / 哪一顿 */
.who-btn { justify-content: flex-start; gap: 8px; width: 100%; }
.who-btn #cart-member-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.meal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meal-chips .chip { min-height: 38px; cursor: pointer; }
.meal-custom { margin-top: 8px; }
.meal-custom .input { flex: 1 1 auto; font-size: 16px; }
.meal-custom .select { flex: 0 0 110px; font-size: 16px; }
.order-meal { font-weight: 600; color: var(--text); }

/* ---------- 模式切换：全部菜单 / 减脂模式 ---------- */
.mode-bar { padding: 12px 0 2px; display: flex; flex-direction: column; gap: 10px; }
.mode-seg { display: flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); }
.mode-seg button {
  flex: 1 1 0; min-height: 40px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); font-size: 15px; font-weight: 500;
}
.mode-seg button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.mode-seg button[data-diet="on"].active { color: var(--success); }
.diet-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.diet-modes[hidden] { display: none; }
.diet-modes button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
}
.diet-modes button b { font-size: 14px; font-weight: 600; color: var(--text); }
.diet-modes button span { font-size: 12px; }
.diet-modes button.active { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.diet-modes button.active b { color: var(--success); }

/* 「减脂」小标、营养信息 */
.diet-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; vertical-align: 2px;
  font-size: 11px; font-weight: 600; line-height: 18px; background: var(--success-soft); color: var(--success);
}
.recipe-nutri { margin-top: 3px; font-size: 12px; color: var(--success); font-weight: 500; }
.recipe-card.has-nutri .recipe-desc { -webkit-line-clamp: 1; }

/* ---------- 今日推荐 ---------- */
.combo-card { border: 1px solid var(--success); background: linear-gradient(180deg, var(--success-soft), var(--surface) 70%); }
.combo-head { display: flex; align-items: flex-start; gap: 8px; }
.combo-title { font-size: 16px; line-height: 1.35; }
.combo-sub { margin-top: 2px; font-size: 12px; color: var(--text-2); }
.combo-head .btn { flex: 0 0 auto; margin: -4px -6px 0 0; }
.combo-list { list-style: none; margin-top: 8px; }
.combo-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 0;
  border: 0; border-bottom: 1px dashed var(--line); background: none; color: var(--text); text-align: left; font-size: 15px;
}
.combo-list li:last-child .combo-item { border-bottom: 0; }
.combo-label {
  flex: 0 0 auto; min-width: 52px; padding: 0 6px; border-radius: 6px; text-align: center;
  font-size: 12px; line-height: 20px; background: var(--success-soft); color: var(--success);
}
.combo-label.combo-normal { background: var(--accent-soft); color: #9a5f0a; }
.combo-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.combo-qty { flex: 0 0 auto; color: var(--text-3); font-size: 13px; }
.combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.combo-nutri { font-size: 13px; color: var(--text-2); }
.combo-nutri b { color: var(--success); font-size: 15px; }
.combo-foot .btn { flex: 0 0 auto; }

/* ---------- 同食材搭配 ---------- */
.pair-card { padding: 12px; }
.pair-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pair-ing { font-size: 16px; font-weight: 600; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.pair-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.pair-light { background: var(--success-soft); }
.pair-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pair-light .pair-label { color: var(--success); }
.pair-dish {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 0;
  border: 0; background: none; color: var(--text); text-align: left;
}
.pair-emoji { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.pair-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pair-meta { font-size: 12px; color: var(--text-3); }
.pair-swap {
  margin-top: 2px; padding: 0; min-height: 28px; border: 0; background: none;
  font-size: 12px; color: var(--primary);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .combo-label.combo-normal { color: var(--accent); } }
:root[data-theme="dark"] .combo-label.combo-normal { color: var(--accent); }

/* ---------- 菜品列表 ---------- */
.recipe-list { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.section-title { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 10px 0 -4px; padding-left: 2px; }
.section-title:first-child { margin-top: 4px; }

.recipe-card {
  display: flex; gap: 12px; padding: 12px; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s;
}
.recipe-card:active { transform: scale(0.99); }
.recipe-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.recipe-card .thumb { width: 84px; height: 84px; }
.thumb.no-img { font-size: 40px; }
.recipe-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.recipe-name { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.recipe-desc {
  margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recipe-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.recipe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 12px; color: var(--text-3); }
.recipe-meta .dot::before { content: "·"; }
.recipe-meta > * { flex: 0 0 auto; }
/* 卡片上只显示一行：放不下的标签整个换到第二行并被裁掉，不会剩下半截残影（行高 22px = .tag 高度，行距拉大保证第二行完全隐藏） */
.recipe-card .recipe-meta { flex-wrap: wrap; align-content: flex-start; row-gap: 8px; height: 22px; overflow: hidden; white-space: nowrap; }
.recipe-act { flex: 0 0 auto; display: flex; align-items: center; min-height: 36px; }

/* 加入购物车「+」与页面内的步进器统一为 36px 视觉尺寸（配合 .hit 达到 44px 触摸区） */
.add-btn {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
  box-shadow: 0 2px 8px rgba(217, 72, 43, 0.35);
  transition: transform 0.08s, background 0.15s;
}
.add-btn:hover { background: var(--primary-hover); }
.add-btn:active { transform: scale(0.92); }
.stepper button { width: 36px; height: 36px; }
.stepper .num { min-width: 30px; font-size: 15px; }

/* 骨架屏 */
.skel-card { display: flex; gap: 12px; padding: 12px; }
.skel-card .thumb-s { width: 84px; height: 84px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.skel-lines .skeleton { height: 14px; }

/* 空状态里的按钮 */
.empty .btn { margin-top: 14px; }
.empty p { font-size: 15px; }

/* ---------- 购物车条 ---------- */
.cart-bar {
  position: fixed; left: 0; right: 0; z-index: 19;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
  pointer-events: none;
  animation: cart-bar-in 0.2s ease-out;
}
@keyframes cart-bar-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cart-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--cart-bar-h); padding: 6px 6px 6px 16px;
  border-radius: var(--radius-pill); background: var(--cart-bar-bg); color: #fff;
  box-shadow: 0 8px 24px rgba(20, 12, 8, 0.28);
}
.cart-bar-info {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0;
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; background: none; color: inherit; font-size: 15px; font-weight: 500;
}
.cart-ico { position: relative; font-size: 26px; line-height: 1; flex: 0 0 auto; }
.cart-ico .badge { position: absolute; top: -6px; right: -10px; border: 2px solid var(--cart-bar-bg); }
.cart-bar-go { border-radius: var(--radius-pill); min-height: 46px; padding: 0 22px; font-size: 15px; flex: 0 0 auto; }

/* ---------- 弹层通用 ---------- */
.sheet { overflow: hidden; }
.sheet:focus, .modal:focus { outline: none; }
/* 详情弹层的 ✕ 放在不随内容滚动的头部条里：不会压住滚动中的用料/步骤，btn-ghost 在深色模式下也清晰可见 */
.detail-head-bar { justify-content: flex-end; padding: 4px 6px 0; }

/* ---------- 菜谱详情 ---------- */
.sheet-detail .sheet-body { padding-top: 0; }
.detail-hero { margin: 0 -16px; height: 220px; width: auto; }
.detail-hero.no-img { font-size: 96px; background: linear-gradient(135deg, var(--accent-soft), var(--primary-soft)); }
.detail-head { padding: 16px 0 4px; }
.detail-head h2 { font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.detail-head .recipe-meta { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.detail-desc { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.nutri-box {
  display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.nutri-box.is-light { background: var(--success-soft); }
.nutri-box div { display: flex; align-items: baseline; gap: 4px; }
.nutri-box b { font-size: 22px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.nutri-box span { font-size: 13px; color: var(--text-2); }
.nutri-box p { flex-basis: 100%; font-size: 12px; color: var(--text-3); }
.alt-label { margin: 8px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.alt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.alt-chip { cursor: pointer; }
.detail-sec { margin-top: 20px; }
.detail-sec h3 {
  display: flex; align-items: baseline; gap: 8px; font-size: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.detail-sec h3::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); align-self: center; }
.ingredients { list-style: none; }
.ingredients li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; font-size: 14px; border-bottom: 1px dashed var(--line);
}
.ingredients li:last-child { border-bottom: 0; }
.ingredients li span:first-child { overflow-wrap: anywhere; }
.ingredients li span:last-child { flex: 0 0 auto; color: var(--text-2); text-align: right; max-width: 45%; overflow-wrap: anywhere; }
.steps { list-style: none; counter-reset: step; }
.steps li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.65; }
.steps li::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: 4px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.steps li p { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.tips-box {
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere;
}
.detail-foot { display: flex; align-items: center; gap: 14px; }
.detail-foot .btn { flex: 1 1 auto; }

/* ---------- 购物车弹层 ---------- */
.sheet-cart .sheet-head { padding-top: 6px; }
.cart-list { list-style: none; }
.cart-item { padding: 10px 0; }
.cart-item-main { display: flex; align-items: center; gap: 10px; }
.cart-emoji { flex: 0 0 auto; width: 36px; font-size: 26px; line-height: 1; text-align: center; }
.cart-name { font-weight: 500; overflow-wrap: anywhere; }
.note-toggle {
  display: inline-flex; align-items: center; min-height: 28px; margin-top: 2px; padding: 0;
  border: 0; background: none; text-align: left;
  font-size: 12px; color: var(--primary); overflow-wrap: anywhere;
}
.note-toggle.has-note { color: var(--text-2); }
.cart-note { margin-top: 6px; padding-left: 46px; }
.cart-note .input { min-height: 40px; padding: 6px 10px; font-size: 16px; } /* ≥16px：iOS 聚焦不放大 */
.cart-empty { padding: 36px 0 24px; }
.order-form { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-total { font-size: 14px; color: var(--text-2); }
.cart-foot .btn { min-width: 140px; }

/* ---------- 我的订单 ---------- */
.orders-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 2px; }
.order-list { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-code { font-size: 17px; font-weight: 700; }
.order-time { margin-left: 8px; font-size: 12px; color: var(--text-3); }
.order-items { list-style: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; }
.order-items li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.order-items li span:first-child { overflow-wrap: anywhere; }
.order-items li.note { display: block; padding: 0 0 4px; font-size: 12px; color: var(--text-3); }
.order-extra { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.order-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.order-hint { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success); font-size: 13px; }

/* ---------- 下单成功 ---------- */
.success-modal { text-align: center; padding: 28px 20px 20px; }
.success-ico { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.success-modal h2 { margin-bottom: 12px; }
.success-code { margin: 8px 0 12px; }
.success-code b { display: block; font-size: 60px; font-weight: 800; line-height: 1.1; letter-spacing: 0.04em; color: var(--primary); font-variant-numeric: tabular-nums; }

/* UI.confirm 的对话框需要盖在本页弹层（z-index 41）之上 */
.modal-backdrop { z-index: 42; }
.modal { z-index: 43; }

/* ---------- 桌面端 ---------- */
@media (min-width: 720px) {
  .recipe-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } /* minmax(0,…)：长词简介不会把列撑出屏幕 */
  .section-title { grid-column: 1 / -1; }
  .recipe-list > .empty, .recipe-list > .skel-card, .recipe-list > .combo-card { grid-column: 1 / -1; }
  .recipe-card:hover { box-shadow: 0 2px 4px rgba(43, 33, 24, 0.06), 0 10px 28px rgba(43, 33, 24, 0.1); }
  .detail-hero { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-bar, .recipe-card, .add-btn { animation: none; transition: none; }
}