/* Unified front-page shell: top nav bar + sub-nav crumb + footer (user/guest pages). */
.shell-top { background: #2D3436; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 50; flex-wrap: wrap; }
.shell-brand { display: flex; align-items: center; gap: 10px; }
.shell-brand img { height: 32px; border-radius: 6px; }
.shell-brand a { color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.shell-brand .store-name { color: #dfe6e9; font-size: 13px; }
.shell-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shell-search { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; padding: 5px 12px; }
.shell-search input { background: transparent; border: none; outline: none; color: #fff; font-size: 13px; width: 128px; }
.shell-search input::placeholder { color: #b2bec3; }
.shell-select { background: #2D3436; color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 8px; font-size: 13px; padding: 6px 8px; max-width: 190px; cursor: pointer; }
.shell-select option { color: #2D3436; }
.shell-link { color: #dfe6e9; text-decoration: none; font-size: 13px; padding: 6px 12px; border-radius: 6px; transition: background 0.2s; }
.shell-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.shell-link.cta { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); }
.shell-user { position: relative; }
.shell-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); background: #2D3436; color: #fff; font-size: 16px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
.shell-menu { display: none; position: absolute; right: 0; top: 42px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); min-width: 150px; overflow: hidden; z-index: 99; }
.shell-menu.show { display: block; }
.shell-menu a { display: block; padding: 11px 16px; color: #2D3436; font-size: 14px; text-decoration: none; border-bottom: 1px solid #F1F2F6; text-align: left; }
.shell-menu a:hover { background: #F6F8FC; }
.shell-menu form { margin: 0; }
.shell-menu form button { display: block; width: 100%; padding: 11px 16px; border: none; background: #fff; color: #E17055; font-size: 14px; cursor: pointer; text-align: left; }
.shell-menu form button:hover { background: #FFF5F5; }
.shell-crumb { max-width: 1080px; margin: 14px auto 10px; padding: 0 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; height: 22px; line-height: 22px; white-space: nowrap; overflow: hidden; }
.shell-crumb > * { white-space: nowrap; }
.shell-crumb a { color: #0984E3; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; line-height: 22px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.shell-crumb a:hover { text-decoration: underline; }
.shell-crumb .sep { color: #B2BEC3; line-height: 22px; }
.shell-crumb .cur { color: #B2BEC3; line-height: 22px; }
.shell-foot { text-align: center; padding: 28px 24px; color: #B2BEC3; font-size: 12px; margin-top: 40px; border-top: 1px solid #ECF0F1; background: #fff; }
/* 扫码下单 / 分享块：桌面端显示二维码，手机端改用系统分享（隐藏二维码） */
.qr-order { max-width: 900px; margin: 8px auto 28px; padding: 0 16px; text-align: center; }
.qr-order .row { display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-top: 12px; }
.qr-order .col { text-align: center; }
.qr-order .col .lbl { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: #2D3436; }
.qr-order .col img.qr { width: 170px; height: 170px; border-radius: 10px; display: block; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.qr-order .url { font-size: 12px; color: #B2BEC3; margin-top: 10px; word-break: break-all; }
.qr-order .share-btn { display: none; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; padding: 14px 26px; border: none; border-radius: 12px; background: linear-gradient(135deg, #74B9FF, #0984E3); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(9,132,227,0.25); }
.qr-order .share-btn:hover { opacity: 0.92; }
@media (max-width: 640px) {
  /* 手机端导航：品牌名独立一行居中；登录/头像仍靠右上角顶部，搜索+门店切换在下方工具行 */
  .shell-top { padding: 10px 14px 12px; gap: 10px; flex-direction: column; align-items: stretch; }
  .shell-brand { width: 100%; justify-content: flex-start; }
  .shell-brand img { height: 26px; }
  .shell-brand a { font-size: 15px; }
  .shell-brand .store-name { display: none; }
  .shell-right { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .shell-search { order: 2; flex: 1 1 auto; min-width: 0; padding: 6px 12px; }
  .shell-search span { display: none; }
  .shell-search input { flex: 1; width: 100%; min-width: 0; font-size: 14px; }
  .shell-select { order: 1; flex: 0 1 auto; min-width: 0; max-width: 150px; padding: 7px 8px; }
  .shell-user, .shell-link.cta { position: absolute; top: 10px; right: 12px; }
  .shell-link { padding: 7px 14px; font-size: 14px; }
  .shell-link.cta { padding: 8px 14px; }
  .shell-avatar { width: 32px; height: 32px; font-size: 15px; }
  .qr-order .row { gap: 16px; }
  .qr-order .col img.qr { display: none; }
  .qr-order .share-btn { display: inline-flex; }
}