/* =============================================================
   购买页与账号页
   -------------------------------------------------------------
   在 website.css 之后加载，只补这两页需要而首页用不到的东西。
   设计变量、按钮、容器全部复用 website.css —— 这两页看起来必须
   和首页是同一个站，而不是一个"外挂上去的商城"。

   两页在未开放期间显示的是 .commerce-closed 那一块。它的样式
   要**足够体面**：一个说"还没开放"的页面如果长得像报错，
   会让人以为网站坏了。
   ============================================================= */

/* hidden 属性必须真的能隐藏。
   -------------------------------------------------------------
   `hidden` 靠的是浏览器默认样式表里的 `[hidden] { display: none }`，
   而**作者样式表里任何一条 display 都会盖过它**。本站有一堆元素依赖
   hidden：下载入口、购买入口、版式缩略图、界面截图、广告位、访问统计 ——
   它们默认关着，由 website.js 在配置齐备时才打开。

   `.btn { display: inline-flex }` 就这么把两个空的下载按钮放了出去：
   宽屏上首屏和导航各出现一个没有文字的白胶囊，而窄屏被
   `@media (max-width: 860px) { .nav-links > a { display: none } }`
   顺手盖住了，所以本地测试一直没看见。它从恢复下载入口那次起就在线上。

   这一行是唯一的保险。`!important` 是有意的：hidden 就是要隐藏，
   没有任何一种情况需要让它显示。 */
[hidden] { display: none !important; }

.commerce-main {
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px);
}

.commerce-main .section-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------- 未开放 ---------- */

.commerce-closed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow-sm);
  max-width: 720px;
}

.commerce-closed h3 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  margin: 0 0 16px;
}

.commerce-closed p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 14px;
}

.commerce-closed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px !important;
}

/* ---------- 通用面板 ---------- */

.commerce-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}

.commerce-panel h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 14px;
}

/* 说明性小字。首页没有表单，所以这个类不在 website.css 里。 */
.field-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* 说明小字里的链接（「隐私说明」「去购买」这类）。颜色和正文一样淡，
   划过时给金色加下划线，否则看不出它是链接。 */
.field-note a { color: var(--gold); text-underline-offset: 3px; }
.field-note a:hover { color: var(--gold-lit); text-decoration-thickness: 2px; }

.translator-field {
  display: block;
  margin-bottom: 18px;
}

.translator-field > span {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 7px;
}

.translator-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.translator-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

/* 键盘焦点要走回网站那一圈 outline。上面那条 :focus 的优先级比
   website.css 里的 `*:focus-visible` 高，不加这一条，键盘用户在这个输入框上
   一点提示都没有（鼠标用户照样只看金色描边和光晕）。 */
.translator-field input:focus-visible {
  outline: 2px solid var(--accent, var(--gold));
  outline-offset: 3px;
}

/* ---------- 商品 ---------- */

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0;
}

.product-price {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}

.product-note {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}

.product-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 支付 ---------- */

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 22px;
}

.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
}

.pay-method:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-wash);
}

/* 支付方式是「点一个胶囊」的选项，原来只有选中之后才有变化 ——
   鼠标划过时看不出来它可点。悬停给同一套金色，只是浅一档。 */
.pay-method {
  transition: border-color .18s ease, background-color .18s ease;
}
.pay-method:hover {
  border-color: var(--gold);
  background: var(--gold-wash);
}
.pay-method input:focus-visible {
  outline: 2px solid var(--accent, var(--gold));
  outline-offset: 2px;
}

.pay-qr {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.pay-qr img {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

/* ---------- 订单状态 ---------- */

.order-status {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.order-status > strong {
  font-family: var(--serif);
  font-size: 19px;
}

.license-reveal {
  margin-top: 20px;
  padding: 20px;
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  border-radius: 14px;
}

.license-reveal code,
.license-row code {
  display: inline-block;
  font-size: 15px;
  letter-spacing: .06em;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
}

.license-row,
.order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.license-row:last-child,
.order-row:last-child {
  border-bottom: none;
}

.order-row > :first-child {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.order-row .field-note {
  margin: 0;
}

.order-status-tag {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}

/* 完成是唯一值得高亮的状态。
   PAID 不高亮 —— 钱收到了但授权码还没签发，那不是"好了"。 */
.order-status-tag[data-status="COMPLETED"] {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-wash);
}

/* ---------- 登录 / 注册 ---------- */

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.auth-tab {
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.auth-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* 两个标签原来只有「当前那个」有下划线，另一个划过没有任何反应。 */
.auth-tab {
  transition: color .18s ease, border-color .18s ease;
}
.auth-tab:hover:not(.is-active) {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.auth-form {
  max-width: 420px;
}

.auth-form .btn {
  width: 100%;
  margin-top: 6px;
}

.auth-code-row {
  display: flex;
  gap: 10px;
}

.auth-code-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-code-row .btn {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  padding: 11px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.auth-privacy {
  max-width: 420px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 个人中心 ---------- */

.account-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.account-head strong {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  margin-top: 4px;
}

/* 注销区不用红色。红色会让它在页面上喊，而它只是一个应当存在、
   不该被误点的入口 —— 误点由两道确认挡住，不是由颜色挡住。 */
.account-danger {
  border-style: dashed;
  box-shadow: none;
}

.account-delete {
  margin-top: 14px;
  font-size: 14px;
  padding: 9px 20px;
}

/* ---------- 商户信息 ---------- */

.merchant-block {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}

.merchant-block dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 26px;
  margin: 0 0 16px;
}

.merchant-block dt {
  font-size: 12px;
  margin-bottom: 3px;
}

.merchant-block dd {
  margin: 0;
  color: var(--ink-2);
}

/* ---------- 错误 ---------- */

.commerce-error {
  margin-top: 18px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ink);
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
}