/* ============================================================
   店铺前台：商品列表 / 商品详情 / 收银台 / 订单查询
   ------------------------------------------------------------
   这是「店铺」不是「落地页」。构成原则换成了电商的那一套：
     · 扫视效率优先 —— 网格对齐、信息位置固定，不要交错和破格
     · 图片是主角 —— 卡片给封面留足面积，文字压到最少
     · 玻璃只做容器 —— 不跟商品图抢注意力
   ============================================================ */

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* ——————————————— 顶栏 ——————————————— */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(237,236,231,.92), rgba(237,236,231,.62) 70%, rgba(237,236,231,0));
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.topbar .wrap { display: flex; align-items: center; gap: 16px; }
.topbar .btn { white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.brand-mark {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 1px rgba(22,19,15,.08), var(--shadow-1);
}
.brand-text { min-width: 0; display: grid; }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md);
  letter-spacing: -.02em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ——————————————— 公告 ——————————————— */
.notice {
  margin: var(--sp-4) 0 0;
  padding: 11px 16px;
  font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6;
  display: flex; align-items: flex-start; gap: 9px;
}
.notice::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); margin-top: .55em;
}

/* ——————————————— 列表页 ——————————————— */
.list-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-4);
}
.list-head h1 { font-size: var(--fs-xl); letter-spacing: -.025em; }
.list-head .count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
  padding-bottom: var(--sp-6);
}
.pcard-sk { height: 320px; border-radius: var(--r-lg); }

.pcard {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  color: inherit;
  padding: 0;
}
/* 封面 —— 卡片里最重要的部分，给足面积 */
.pcard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(22,19,15,.04);
}
.pcard-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-media .ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--muted-dim); font-size: var(--fs-sm);
}
.pcard-badge {
  position: absolute; top: 11px; left: 11px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em;
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 2px 8px rgba(10,107,82,.28);
}
.pcard-out {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 650; color: #fff;
  background: rgba(22,19,15,.46);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pcard-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard-title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 750;
  letter-spacing: -.02em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-sum {
  margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.62em);
}
.pcard-foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--glass-hair);
}
.pcard-price {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  color: var(--accent); letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard-price small { font-size: .62em; margin-right: 1px; }
.pcard-price em { font-style: normal; font-size: .58em; font-weight: 600; margin-left: 2px; color: var(--muted); }
.pcard-price.muted { color: var(--muted); font-size: var(--fs-base); }
.pcard-plans { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* ——————————————— 详情页 ——————————————— */
.backlink {
  display: inline-flex; align-items: center; gap: 7px;
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: var(--fs-sm); color: var(--muted);
  min-height: 32px;
  transition: color var(--dur-fast) var(--ease-out);
}
.backlink:hover { color: var(--accent); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sp-5);
  align-items: start;
  padding-bottom: var(--sp-5);
}

.pdp-media { position: sticky; top: 80px; display: grid; gap: 12px; }
.gallery-main {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg);
  padding: 8px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-lg) - 8px); }
.gallery-main .ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--muted-dim); font-size: var(--fs-sm);
}
.gallery-thumbs { display: flex; gap: 9px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 66px; height: 50px; padding: 0; border: 0; overflow: hidden; cursor: pointer;
  border-radius: 10px; background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(22,19,15,.09);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gallery-thumbs button:hover { transform: translateY(-2px); }
.gallery-thumbs button[aria-current='true'] { box-shadow: 0 0 0 2px var(--accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 购买盒 */
.pdp-buy { padding: 22px; display: grid; gap: 17px; }
.pdp-head { display: grid; gap: 7px; }
.pdp-head h1 { font-size: var(--fs-xl); letter-spacing: -.028em; line-height: 1.25; }
.pdp-sum { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

.opt { color: var(--muted); font-weight: 400; }
.buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .btn { flex: none; }

/* ——— 套餐：详情页里的紧凑列表项 ——— */
.plans { display: grid; gap: 9px; }
.plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 13px 15px;
  text-align: left;
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.plan:hover { background: rgba(255,255,255,.72); }
.plan[aria-checked='true'] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.plan-radio {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(22,19,15,.26);
  display: grid; place-items: center;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.plan-radio::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: scale(0);
  transition: transform var(--dur-base) var(--ease-spring);
}
.plan[aria-checked='true'] .plan-radio { box-shadow: inset 0 0 0 1.5px var(--accent); }
.plan[aria-checked='true'] .plan-radio::after { transform: scale(1); }

.plan-body { min-width: 0; }
.plan-name {
  font-weight: 650; font-size: var(--fs-base);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.plan-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.plan-features { display: flex; flex-wrap: wrap; gap: 3px 11px; margin-top: 7px; padding: 0; list-style: none; }
.plan-features li { font-size: var(--fs-xs); color: var(--text-soft); display: flex; align-items: center; gap: 5px; }
.plan-features li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); flex: none; }

.plan-price { text-align: right; flex: none; }
.plan-price .cur { font-size: var(--fs-xs); color: var(--muted); margin-right: 1px; }
.plan-price .val {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md);
  letter-spacing: -.035em; line-height: 1;
}
.plan[aria-checked='true'] .plan-price .val { color: var(--accent); }
.plan-price .was { display: block; font-size: 11px; color: var(--muted-dim); text-decoration: line-through; margin-top: 3px; }
.plan-price .stock { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.plan-price .stock.low { color: var(--warn); }
.plan-price .stock.out { color: var(--danger); }
.plan[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.plan[aria-disabled='true']:hover { background: transparent; }

/* 数量步进器 */
.stepper { display: flex; align-items: center; border-radius: var(--r-pill); overflow: hidden; width: fit-content;
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.12); background: rgba(255,255,255,.55); }
.stepper button {
  width: 42px; height: 44px; border: 0; background: transparent; color: var(--text);
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.stepper button:hover:not(:disabled) { background: rgba(22,19,15,.06); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper .qty { width: 42px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; }

/* 支付方式 */
.channels { display: grid; gap: 8px; }
.channel {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border: 0; width: 100%; text-align: left;
  color: inherit; font: inherit; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255,255,255,.50);
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.10);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.channel:hover { background: rgba(255,255,255,.82); }
.channel[aria-checked='true'] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.channel .ci { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: rgba(22,19,15,.06); }
.channel .cl { font-size: var(--fs-sm); font-weight: 500; }
.channel .badge { margin-left: auto; }

/* 金额 */
.sum { display: grid; gap: 7px; }
.sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-sm); color: var(--text-soft); }
.sum-line .v { font-variant-numeric: tabular-nums; }
.sum-line .ac { color: var(--accent); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; }
.sum-total .lab { font-size: var(--fs-sm); color: var(--muted); }
.sum-total .amt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl);
  letter-spacing: -.048em; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sum-total .amt small { font-size: var(--fs-md); margin-right: 2px; }
.buy-tip { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.6; }

/* ——————————————— 商品详情正文 ——————————————— */
.detail { padding: var(--sp-5) 0 var(--sp-6); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: var(--sp-5); align-items: start; }

.prose { font-size: var(--fs-base); line-height: 1.85; color: var(--text-soft); max-width: 64ch; }
.prose h2 {
  font-size: var(--fs-lg); color: var(--text); margin: var(--sp-5) 0 var(--sp-3);
  letter-spacing: -.028em; padding-bottom: 9px;
  border-bottom: 1px solid var(--glass-hair);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-md); color: var(--text); margin: var(--sp-4) 0 9px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 650; }
.prose code {
  font-family: var(--font-mono); font-size: .88em; padding: 2px 7px; border-radius: 6px;
  background: rgba(22,19,15,.06); color: var(--accent);
}
.prose pre { padding: 16px; border-radius: var(--r-sm); background: rgba(22,19,15,.05); overflow-x: auto;
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.08); }
.prose pre code { background: none; padding: 0; color: var(--text-soft); }
.prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; color: var(--muted); border-left: 2px solid var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: var(--fs-sm); }
.prose th, .prose td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--glass-hair); }
.prose th { color: var(--text); font-weight: 650; }
.prose img { border-radius: var(--r-md); margin: 1.2em 0; }

.aside-card { padding: 20px; display: grid; gap: 13px; position: sticky; top: 80px; }
.aside-card h4 { font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: -.02em; }
.aside-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; margin: 0; }

/* 步骤条：block + 绝对定位序号。
   不能用 flex —— flex 会把 li 里的 <strong> 变成独立 flex item，整行文字被拆散。 */
.steps { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li {
  position: relative; display: block; padding-left: 35px;
  font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.7;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(10,107,82,.22);
}
.steps li strong { color: var(--text); font-weight: 650; }

/* ——————————————— 页脚 ——————————————— */
.foot { padding: var(--sp-4) 0 var(--sp-5); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding-top: var(--sp-4); border-top: 1px solid var(--glass-hair); }
.foot p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.foot a { color: var(--text-soft); }
.foot a:hover { color: var(--accent); }

/* ============================================================
   收银台
   ============================================================ */
.pay-shell { min-height: 100svh; display: grid; place-items: center; padding: var(--sp-5) 20px; }
.pay-card { width: min(100%, 560px); padding: 30px; display: grid; gap: 21px; }

.pay-head { display: grid; gap: 8px; text-align: center; }
.pay-head .amt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl);
  letter-spacing: -.05em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.pay-head .amt small { font-size: var(--fs-lg); margin-right: 3px; }
.pay-head .sub { font-size: var(--fs-sm); color: var(--muted); }

.qr-frame {
  width: 232px; height: 232px; margin-inline: auto; padding: 13px;
  border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 0 0 1px rgba(22,19,15,.10), var(--shadow-3);
}
.qr-frame img { width: 100%; height: 100%; border-radius: 10px; }

/* 倒计时：玻璃管里下降的液面 */
.timer { display: grid; gap: 9px; }
.timer-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--muted); }
.timer-row .t { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.tube {
  height: 7px; border-radius: var(--r-pill); overflow: hidden;
  background: rgba(22,19,15,.09);
  box-shadow: inset 0 1px 3px rgba(22,19,15,.14);
}
.tube-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, #17a37c);
  transition: width 1s linear;
}
.tube-fill.low { background: linear-gradient(90deg, #8f1d17, var(--danger)); }

.pay-status { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }

/* 卡密揭晓 */
.goods { display: grid; gap: 10px; }
.goods-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(22,19,15,.09);
}
.goods-item .n {
  width: 23px; height: 23px; flex: none; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.goods-item .v {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm);
  word-break: break-all; line-height: 1.6; color: var(--text); user-select: all;
}
@media (prefers-reduced-motion: no-preference) {
  .goods-item { animation: unveil 620ms var(--ease-out) backwards; }
  .goods-item:nth-child(2) { animation-delay: 90ms; }
  .goods-item:nth-child(3) { animation-delay: 180ms; }
  .goods-item:nth-child(n+4) { animation-delay: 260ms; }
  @keyframes unveil {
    from { opacity: 0; transform: translateY(14px); filter: blur(9px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
}

.success-mark {
  width: 60px; height: 60px; margin-inline: auto; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(16,113,74,.20), rgba(16,113,74,.07));
  box-shadow: inset 0 0 0 1.5px rgba(16,113,74,.34);
  color: var(--ok);
}
@media (prefers-reduced-motion: no-preference) {
  .success-mark { animation: pop 560ms var(--ease-spring); }
  @keyframes pop { from { transform: scale(.55); opacity: 0; } }
}

.addr-box { display: grid; gap: 9px; padding: 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(22,19,15,.09); }
.addr-box .k { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.addr-box .v { font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; color: var(--text); }
.addr-box .v.big { font-size: var(--fs-md); color: var(--accent); font-weight: 600; }

/* ============================================================
   订单查询
   ============================================================ */
.lookup-shell { min-height: 100svh; padding: var(--sp-5) 20px var(--sp-6); }
.lookup-card { width: min(100%, 720px); margin-inline: auto; padding: 28px; display: grid; gap: 19px; }
.order-row { padding: 16px 18px; display: grid; gap: 11px; }
.order-row .top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.order-row .oid { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-soft); }
.order-row .meta { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }

/* ============================================================
   404
   ============================================================ */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 24px; }
.nf h1 { font-size: clamp(5rem, 22vw, 11rem); letter-spacing: -.06em; color: var(--accent); line-height: .86; }

/* ============================================================
   响应式：375 / 768 / 1440 三档
   ============================================================ */
@media (max-width: 1080px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-media { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
}
@media (max-width: 720px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard-body { padding: 11px 12px 13px; gap: 5px; }
  .pcard-title { font-size: var(--fs-base); }
  .pcard-sum { font-size: var(--fs-xs); -webkit-line-clamp: 2; min-height: calc(2 * 1.6em); }
  .pcard-price { font-size: var(--fs-md); }
  .pcard-plans { display: none; }
  .pcard-foot { padding-top: 8px; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 24px); }
  .brand-sub { display: none; }
  .brand-name { font-size: var(--fs-base); }
  .topbar .btn-sm { padding: 8px 13px; }
  .pdp-buy { padding: 17px; }
  .buy-row { grid-template-columns: 1fr; }
  .pay-card, .lookup-card { padding: 20px; }
  .qr-frame { width: 200px; height: 200px; }
  .foot-inner { flex-direction: column; align-items: flex-start; }
}