/* ==========================================================================
   客户自助下单页 —— 移动优先（浅色）
   ========================================================================== */

#shop { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding-bottom: 120px; }

/* ── 页头 ────────────────────────────────────────────── */
.shop-hero { text-align: center; padding: 42px 20px 24px; position: relative; }
.shop-mark {
    width: 68px; height: 68px; border-radius: 24px; margin: 0 auto 18px;
    background: linear-gradient(145deg, #F6E4C2, var(--brand-lit) 48%, var(--brand));
    box-shadow: 0 10px 28px -10px rgba(184,134,59,.6), inset 0 1px 0 rgba(255,255,255,.55);
    display: grid; place-items: center;
    color: #fff; font-family: var(--font-serif); font-size: 30px; font-weight: 600;
    animation: markin 1s var(--ease) both;
}
@keyframes markin { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }

.shop-title { font-family: var(--font-serif); font-size: 27px; letter-spacing: .14em; }
.shop-sub { font-size: 11px; color: var(--text-3); letter-spacing: .3em; margin-top: 6px; }

.notice {
    margin: 20px 16px 0; padding: 13px 16px;
    background: var(--brand-a08); border: 1px solid var(--brand-a12);
    border-radius: var(--r); font-size: 13px; line-height: 1.75; color: var(--text-2);
}

/* 认出老客户时的欢迎条 */
.welcome {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 16px 0; padding: 13px 16px;
    background: linear-gradient(135deg, var(--brand-a12), var(--brand-a08));
    border: 1px solid var(--brand-a20); border-radius: var(--r);
}
.wname { font-family: var(--font-serif); font-size: 16px; color: var(--brand-deep); }

/* ── 品类切换（顶层）─────────────────────────────────── */
.kind-tabs {
    position: sticky; top: 0; z-index: 45;
    padding: 12px 16px 10px;
    background: rgba(251,248,243,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.kind-tabs .row1 { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kind-tabs .row1::-webkit-scrollbar { display: none; }
.kind-tab {
    flex: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2);
    font-family: var(--font-serif); font-size: 14px; padding: 8px 18px; border-radius: 999px;
    cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; letter-spacing: .05em;
}
.kind-tab.on {
    background: linear-gradient(135deg, var(--brand-lit), var(--brand));
    color: #fff; border-color: transparent; font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(184,134,59,.55);
}
.kind-tab .n { font-family: var(--font-num); font-size: 11px; opacity: .7; margin-left: 4px; }

/* 二级分类锚点 */
.cat-nav { display: flex; gap: 7px; overflow-x: auto; margin-top: 9px; scrollbar-width: none; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav button {
    flex: none; border: none; background: var(--surface-3); color: var(--text-2);
    font-family: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
    transition: all var(--dur) var(--ease); white-space: nowrap;
}
.cat-nav button.on { background: var(--brand-a20); color: var(--brand-deep); font-weight: 600; }

/* ── 商品 ────────────────────────────────────────────── */
.cat-section { padding: 0 16px; }
.cat-title {
    font-family: var(--font-serif); font-size: 16px; letter-spacing: .06em; color: var(--brand-deep);
    display: flex; align-items: center; gap: 12px; padding: 24px 0 10px;
}
.cat-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brand-a20), transparent); }

.goods {
    display: flex; align-items: center; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.goods:last-child { border-bottom: none; }
.goods.picked {
    background: var(--brand-a08); margin: 0 -12px; padding: 14px 12px;
    border-radius: var(--r); border-bottom-color: transparent;
}
.goods-name { font-size: 15.5px; }
.goods-intro { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.goods-price { font-family: var(--font-num); font-size: 16px; color: var(--brand-deep); font-weight: 600; margin-top: 5px; }
.goods-price small { font-size: 11px; color: var(--text-3); font-weight: 400; margin-left: 2px; }

/* 大一点的步进器，手机好按 */
.shop-stepper { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.shop-stepper button {
    width: 33px; height: 33px; border-radius: 50%; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--text-2); cursor: pointer;
    display: grid; place-items: center; transition: all var(--dur) var(--ease);
}
.shop-stepper button.add {
    background: linear-gradient(135deg, var(--brand-lit), var(--brand));
    color: #fff; border-color: transparent;
    box-shadow: 0 3px 10px -3px rgba(184,134,59,.6);
}
.shop-stepper button.add:active { transform: scale(.9); }
.shop-stepper .q {
    min-width: 30px; text-align: center; font-family: var(--font-num); font-size: 16px; font-weight: 600;
}

/* ── 底部购物条 ───────────────────────────────────────── */
.cart-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    padding: 12px 16px calc(12px + var(--safe-b));
    background: rgba(255,255,255,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -12px rgba(56,45,30,.3);
    display: flex; align-items: center; gap: 14px;
    animation: rise .3s var(--ease) both;
}
.cart-bar .info { flex: 1; min-width: 0; }
.cart-bar .qty { font-size: 12px; color: var(--text-2); }
.cart-bar .amt { font-family: var(--font-num); font-size: 23px; font-weight: 600; color: var(--brand-deep); line-height: 1.2; }

/* ── 表单 / 结果 ──────────────────────────────────────── */
.sheet { padding: 0 16px; }
.sheet-card {
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px;
    box-shadow: var(--shadow-2);
}

.order-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.order-line:last-child { border-bottom: none; }
.order-line .n { font-family: var(--font-num); }

.result-wrap { text-align: center; padding: 46px 20px; }
.result-mark {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px;
    background: linear-gradient(145deg, var(--brand-lit), var(--brand));
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 14px 34px -12px rgba(184,134,59,.65);
    animation: markin .9s var(--ease) both;
}
.result-no {
    font-family: var(--font-num); font-size: 19px; letter-spacing: .1em;
    color: var(--brand-deep); margin: 10px 0 6px;
}

/* 进度条 */
.steps { display: flex; align-items: center; margin: 6px 0 18px; }
.step { flex: 1; text-align: center; position: relative; }
.step .dot {
    width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 7px;
    background: var(--surface); border: 2px solid var(--line-2); transition: all .4s var(--ease);
}
.step.on .dot { background: var(--brand); border-color: var(--brand); }
.step .lb { font-size: 10.5px; color: var(--text-3); }
.step.on .lb { color: var(--brand-deep); font-weight: 600; }
.step::before {
    content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line);
}
.step:first-child::before { display: none; }
.step.on::before { background: var(--brand); }

.shop-foot { text-align: center; padding: 34px 20px 20px; font-size: 11px; color: var(--text-3); letter-spacing: .1em; line-height: 2; }

@media (min-width: 640px) {
    .cart-bar {
        max-width: 620px; left: 50%; transform: translateX(-50%);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        border: 1px solid var(--line); border-bottom: none;
    }
}