/* ═══════════════════════════════════════════
   ZHOSIE — Shop (cart / checkout / order)
   与首页共用同一套品牌色与字体变量；
   这里只放商店页自己的版式，不重复首页那 1300 行。
   ═══════════════════════════════════════════ */

:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --off-white: #f5f3f0;
    --cream: #e8e4df;
    --gold: #c9a96e;
    --gold-dark: #a8894f;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --danger: #a32d2d;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Outfit', 'Helvetica Neue', sans-serif;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body.shop {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 用 :where() 把这条的权重压到 0。
   写成 body.shop a（权重 0,1,2）会盖掉 .shop-btn-solid 的 color:var(--white)，
   让 <a class="shop-btn-solid"> 变成一块没有文字的黑条 —— 踩过一次，别改回去。 */
:where(body.shop) :where(a) { color: inherit; text-decoration: none; }
body.shop :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--black); color: var(--white); padding: 12px 20px; font-size: 13px;
}
.skip-link:focus { left: 0; }

/* ── 顶部导航 ── */
.shop-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: 80px; padding: 0 60px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
}

.shop-logo {
    font-family: var(--font-display); font-size: 26px; font-weight: 300;
    letter-spacing: 7px; text-transform: uppercase;
}

.shop-nav-links { display: flex; gap: 32px; list-style: none; }
.shop-nav-links a {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gray-600);
    transition: color 0.25s var(--ease);
}
.shop-nav-links a:hover { color: var(--gold); }

.shop-cart-link {
    position: relative; display: inline-flex; align-items: center;
    color: var(--black); transition: color 0.25s var(--ease);
}
.shop-cart-link:hover { color: var(--gold); }

.shop-cart-badge {
    position: absolute; top: -6px; right: -10px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--white);
    font-size: 10px; font-weight: 500; line-height: 1;
    border-radius: 999px;
}
.shop-cart-badge[hidden] { display: none; }

/* ── 布局 ── */
.shop-main { flex: 1; }
.shop-wrap { max-width: 1160px; margin: 0 auto; padding: 64px 40px 120px; }
.shop-wrap-narrow { max-width: 720px; }

.shop-head { margin-bottom: 40px; }
.shop-eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px;
}
.shop-head h1 {
    font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px);
    font-weight: 300; line-height: 1.1;
}
.shop-sub { color: var(--gray-500); font-size: 14px; margin-top: 12px; max-width: 62ch; }

.shop-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.shop-col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shop-col-side { display: flex; flex-direction: column; gap: 16px; }
.shop-card-sticky { position: sticky; top: 104px; }

.shop-card {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px 26px;
    background: var(--white);
}
.shop-card h2 {
    font-family: var(--font-display); font-size: 22px; font-weight: 400;
    margin-bottom: 16px;
}
.shop-card h2 em { font-style: normal; font-size: 12px; color: var(--gray-400); letter-spacing: 1px; }

.shop-body { font-size: 14px; font-weight: 300; color: var(--gray-600); }
.shop-body + .shop-body { margin-top: 10px; }
.shop-body a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

.shop-fineprint { font-size: 12px; font-weight: 300; color: var(--gray-500); margin-top: 10px; }
.shop-fineprint a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

.shop-back { margin-top: 32px; font-size: 13px; letter-spacing: 1px; }
.shop-back a { color: var(--gray-500); }
.shop-back a:hover { color: var(--gold); }

/* ── 空购物车 ── */
.shop-empty {
    border: 1px dashed var(--gray-300); border-radius: 12px;
    padding: 64px 24px; text-align: center;
}
.shop-empty[hidden] { display: none; }
.shop-empty p { color: var(--gray-500); font-weight: 300; margin-bottom: 20px; }

/* ── 提示条 ── */
.shop-alert {
    border: 1px solid var(--gray-200); border-left: 3px solid var(--gray-400);
    border-radius: 8px; padding: 14px 18px; margin-bottom: 24px;
    font-size: 13px; font-weight: 300; color: var(--gray-600);
    background: var(--off-white);
}
.shop-alert[hidden] { display: none; }
.shop-alert-warn { border-left-color: var(--gold); }
.shop-alert ul { list-style: none; }
.shop-alert li + li { margin-top: 6px; }

/* ── 商品行 ── */
.cart-list { list-style: none; }

.cart-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 20px; align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-200);
}
.cart-list > .cart-row:first-child { padding-top: 0; }
.cart-list > .cart-row:last-child { border-bottom: none; padding-bottom: 0; }

.cart-thumb { width: 92px; aspect-ratio: 4 / 5; background: var(--off-white); overflow: hidden; border-radius: 6px; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-info { min-width: 0; }
.cart-name { font-size: 16px; font-weight: 400; }
.cart-meta { font-size: 12px; color: var(--gray-500); margin-top: 3px; }
.cart-unit { font-size: 12px; color: var(--gray-400); margin-top: 6px; }

.cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-line { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart-tools { display: flex; align-items: center; gap: 14px; }

.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--gray-200); border-radius: 999px; overflow: hidden;
}
.qty button {
    width: 30px; height: 30px; border: none; background: transparent;
    font-size: 15px; line-height: 1; color: var(--gray-600); cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.qty button:hover { background: var(--off-white); color: var(--black); }
.qty button:disabled { color: var(--gray-300); cursor: not-allowed; background: transparent; }
.qty span { min-width: 26px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.cart-remove {
    border: none; background: none; cursor: pointer; padding: 0;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gray-400); transition: color 0.2s var(--ease);
}
.cart-remove:hover { color: var(--danger); }

.cart-list-mini .cart-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; }
.cart-list-mini .cart-thumb { width: 52px; border-radius: 4px; }
.cart-list-mini .cart-name { font-size: 14px; }
.cart-list-mini .cart-line { font-size: 13px; }
.cart-list-mini .qty { display: none; }

/* ── 金额汇总 ── */
.sum-list { margin-top: 20px; border-top: 1px solid var(--gray-200); padding-top: 18px; }
.sum-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.sum-list dt { font-size: 13px; font-weight: 300; color: var(--gray-600); }
.sum-list dd { font-size: 14px; font-variant-numeric: tabular-nums; }
.sum-zone { color: var(--gray-400); font-size: 12px; }
.sum-total {
    margin-top: 12px; padding-top: 14px !important;
    border-top: 1px solid var(--gray-200);
}
.sum-total dt { font-size: 14px; color: var(--black); }
.sum-total dd { font-family: var(--font-display); font-size: 26px; font-weight: 400; }
/* 「+ shipping」小字：目的地未定时总额只等于小计，没有这几个字
   买家会把小计当成最终要付的钱，到结算页就觉得被加价了 */
.sum-total-note {
    font-family: var(--font-body); font-style: normal;
    font-size: 11px; color: var(--gray-400); letter-spacing: 0.3px;
}

/* ── 按钮 ── */
.shop-btn {
    display: inline-block; width: 100%;
    padding: 15px 28px; margin-top: 22px;
    border: 1px solid var(--black); background: transparent; color: var(--black);
    font-family: inherit; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
    text-align: center; cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.shop-btn:hover:not(:disabled) { background: var(--black); color: var(--white); }
.shop-btn-solid { background: var(--black); color: var(--white); }
.shop-btn-solid:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--white); }
.shop-btn:disabled { opacity: 0.5; cursor: wait; }
.shop-empty .shop-btn { width: auto; margin-top: 0; }

/* ── 表单 ── */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f-full { grid-column: 1 / -1; }
.f > span {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray-500);
}
.f > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--gray-400); }
.f input, .f select, .f textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--gray-200); border-radius: 6px;
    background: var(--white); color: var(--black);
    font-family: inherit; font-size: 14px; font-weight: 300;
    transition: border-color 0.2s var(--ease);
}
.f input:hover, .f select:hover, .f textarea:hover { border-color: var(--gray-300); }
.f textarea { resize: vertical; }
.f select { appearance: none; background-image: none; cursor: pointer; }

.pay-list { display: flex; flex-direction: column; gap: 10px; }
.pay-option {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 8px;
    font-size: 14px; cursor: pointer;
}
.pay-list .pay-option:hover { border-color: var(--gray-300); }
.pay-option input { margin-top: 4px; accent-color: var(--gold); }
.pay-option-single { cursor: default; }
/* 通道卡片正文：strong 是通道名，em 是一句话说明，small 是补充条款 */
.pay-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-body strong { font-weight: 600; letter-spacing: 0.2px; }
.pay-body em { font-style: normal; font-size: 13px; color: var(--gray-500); line-height: 1.45; }
.pay-body small { font-size: 11.5px; color: var(--gray-400); line-height: 1.45; }

/* ── 加购按钮（首页商品卡内联使用） ── */
.add-to-cart {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--white); background: rgba(10, 10, 10, 0.55); color: var(--white);
    backdrop-filter: blur(6px);
    font-family: var(--font-body); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.add-to-cart:hover:not(:disabled) { background: var(--white); color: var(--black); }
.add-to-cart:disabled { cursor: not-allowed; opacity: 0.72; }
.add-to-cart[data-sold-out] { border-color: var(--gray-400); color: var(--gray-200); }

.product-price {
    font-family: var(--font-display); font-size: 19px; font-weight: 400;
    letter-spacing: 0.5px;
}

/* ── 轻提示 ── */
.shop-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
    z-index: 4000;
    padding: 13px 26px;
    background: var(--black); color: var(--white);
    font-size: 12px; letter-spacing: 1.2px;
    border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.shop-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 骨架（等待服务端报价时） ── */
.is-loading { opacity: 0.45; }

/* ── 响应式 ── */
@media (max-width: 1024px) {
    .shop-nav { padding: 0 32px; }
    .shop-wrap { padding: 48px 32px 96px; }
    .shop-cols { grid-template-columns: 1fr; gap: 32px; }
    .shop-card-sticky { position: static; }
}

@media (max-width: 768px) {
    .shop-nav { height: 68px; padding: 0 20px; }
    .shop-logo { font-size: 21px; letter-spacing: 5px; }
    .shop-nav-links { display: none; }
    .shop-wrap { padding: 36px 20px 80px; }
    .shop-head { margin-bottom: 28px; }
    .shop-card { padding: 20px 18px; }
    .f-grid { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; row-gap: 10px; }
    .cart-thumb { width: 72px; }
    .cart-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .cart-list-mini .cart-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .cart-list-mini .cart-thumb { width: 44px; }
    .sum-total dd { font-size: 23px; }
}

/* ── 页脚 ── */
.shop-footer { border-top: 1px solid var(--gray-200); padding: 36px 60px; }
.shop-footer-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    max-width: 1160px; margin: 0 auto;
    font-size: 12px; color: var(--gray-500);
}
.shop-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.shop-footer-links a { color: var(--gray-500); transition: color 0.25s var(--ease); }
.shop-footer-links a:hover { color: var(--gold); }

@media (max-width: 768px) {
    .shop-footer { padding: 28px 20px; }
    .shop-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    body.shop * { transition: none !important; }
}


/* ═══════════════════════════════════════════
   迷你购物车（右侧抽屉 + 常驻悬浮入口）

   加购后只让角标 +1 太不显眼 —— 买家不确定加上没有就会重复点。
   抽屉把"买到了什么 / 花多少 / 能不能结账"当场摊开。

   样式对首页、商品购买页、商店外壳三处通用，所以这里**不能**用
   body.shop 限定（首页与商品页的 <body> 上没有这个类）。
   层级：抽屉 5010 > 遮罩 5000 > 悬浮入口 4900 > Cookie 横幅 3000。
   ═══════════════════════════════════════════ */

.mc-backdrop {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(10, 10, 10, 0.42);
    animation: mc-fade 0.3s var(--ease);
}
.mc-backdrop[hidden] { display: none; }
@keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } }

.mc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 5010;
    width: min(408px, 92vw);
    display: flex; flex-direction: column;
    background: var(--white); color: var(--black);
    border-left: 1px solid var(--gray-200);
    box-shadow: -18px 0 48px rgba(10, 10, 10, 0.14);
    transform: translateX(102%);
    /* 收起时用 visibility 摘出 Tab 键顺序；延迟到动画结束再隐藏 */
    visibility: hidden;
    transition: transform 0.42s var(--ease), visibility 0s linear 0.42s;
}
.mc-drawer.is-open {
    transform: none; visibility: visible;
    transition: transform 0.42s var(--ease), visibility 0s;
}
html.mc-locked, html.mc-locked body { overflow: hidden; }

.mc-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--gray-200);
}
.mc-title { font-family: var(--font-display); font-size: 25px; font-weight: 400; }
.mc-count { font-family: var(--font-body); font-size: 12px; font-style: normal; color: var(--gray-400); margin-left: 9px; }
.mc-close {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200); border-radius: 50%;
    background: transparent; color: var(--black); cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.mc-close:hover { background: var(--black); border-color: var(--black); color: var(--white); }

.mc-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 26px 0; -webkit-overflow-scrolling: touch; }
.mc-list { list-style: none; }
.mc-loading { padding: 40px 0; text-align: center; font-size: 13px; color: var(--gray-400); }

/* 抽屉比购物车页窄：明细行改成「图 + 文字」一行、「价格 + 操作」再一行，
   免得 408px 里挤成三列后商品名被截断。 */
.mc-list .cart-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px; align-items: start;
    padding: 16px 0;
}
.mc-list .cart-thumb { width: 64px; border-radius: 5px; }
.mc-list .cart-name { font-size: 14.5px; line-height: 1.45; }
.mc-list .cart-meta { font-size: 11.5px; }
.mc-list .cart-unit { font-size: 11.5px; margin-top: 5px; }
.mc-list .cart-side {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: -4px;
}
.mc-list .cart-line { font-size: 14px; }
.mc-list .cart-remove { font-size: 10.5px; }

.mc-empty { padding: 46px 0; text-align: center; }
.mc-empty[hidden] { display: none; }
.mc-empty p { font-size: 14px; color: var(--gray-500); margin-bottom: 18px; }

.mc-foot {
    flex: none;
    padding: 20px 26px 26px;
    border-top: 1px solid var(--gray-200);
}
.mc-foot[hidden] { display: none; }
.mc-free { font-size: 12px; color: var(--gold-dark); }
.mc-free:empty { display: none; }
.mc-sum { margin-top: 6px; }
.mc-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.mc-sum dt { font-size: 13px; font-weight: 300; color: var(--gray-600); }
.mc-sum dd { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.mc-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gray-200); align-items: baseline; }
.mc-total dt { font-size: 14px; color: var(--black); }
.mc-total dd { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
/* 「+ shipping」小字：没有它，买家会把小计误当成最终要付的钱 */
.mc-total-note { font-family: var(--font-body); font-style: normal; font-size: 11px; color: var(--gray-400); letter-spacing: 0.3px; }
.mc-fineprint { font-size: 11.5px; color: var(--gray-400); line-height: 1.5; margin-top: 12px; }

.mc-btn {
    display: block; width: 100%;
    padding: 14px 20px; margin-top: 12px;
    border: 1px solid var(--black); background: transparent; color: var(--black);
    font-family: inherit; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.mc-btn:hover { background: var(--black); color: var(--white); }
.mc-btn-solid { background: var(--black); color: var(--white); }
.mc-btn-solid:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* 常驻悬浮入口：抽屉关着且车里有货时才出现 —— 这是"购物车在哪"的持续答案 */
.mc-pill {
    position: fixed; right: 22px; bottom: 22px; z-index: 4900;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 18px 12px 15px;
    border: 1px solid var(--black); border-radius: 999px;
    background: var(--black); color: var(--white);
    font-family: inherit; font-size: 12px; letter-spacing: 0.4px;
    cursor: pointer; box-shadow: 0 10px 26px rgba(10, 10, 10, 0.22);
    animation: mc-rise 0.34s var(--ease);
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.mc-pill[hidden] { display: none; }
.mc-pill:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.mc-pill-count {
    min-width: 19px; height: 19px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--black);
    font-size: 10.5px; font-weight: 600; line-height: 1; border-radius: 999px;
}
.mc-pill:hover .mc-pill-count { background: var(--white); }
.mc-pill-total { font-variant-numeric: tabular-nums; }
@keyframes mc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 角标跳动：加购时用一次动效把视线拉过去 */
.shop-cart-badge.is-bump,
.nav-cart-badge.is-bump { animation: cart-bump 0.5s var(--ease); }
@keyframes cart-bump {
    0% { transform: scale(1); }
    34% { transform: scale(1.6); }
    100% { transform: scale(1); }
}

@media (max-width: 560px) {
    .mc-drawer { width: 100vw; border-left: none; }
    .mc-head { padding: 18px; }
    .mc-body { padding: 2px 18px 0; }
    .mc-foot { padding: 16px 18px 22px; }
    .mc-list .cart-row { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
    .mc-list .cart-thumb { width: 58px; }
    .mc-pill { right: 14px; bottom: 14px; padding: 11px 15px 11px 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-drawer, .mc-backdrop, .mc-pill,
    .shop-cart-badge.is-bump, .nav-cart-badge.is-bump {
        animation: none !important;
        transition: none !important;
    }
}