/* WordPress 与本主题之间的胶水层。
   设计稿的样式在 site.css 里原样保留；这里只处理「块主题 + WooCommerce 带进来」的差异：
   站头与后台工具条的错位、商品图替换掉程序画的袋子之后的尺寸、Woo 购物车/结账页的底子、
   跨页过渡的开关。 */

/* ---------- 骨架 ---------- */
html { scroll-padding-top: 96px; }
body { margin: 0; }
.wp-site-blocks { padding: 0; }
/* 块主题会给 body 加 margin 与 28px 的竖向间距，设计稿不需要 */
body.admin-bar .hdr { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hdr { top: 46px; } }
.hdr { backdrop-filter: blur(10px); }

/* 跨页过渡（Chrome / Safari 18+；不支持的浏览器直接跳页） */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- 商品图（设计稿用的程序画袋子，线上换成真实照片） ---------- */
.pc .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pc .stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .12)); }
.pc .stage .shadow { display: none; }
.pc:hover .stage > img { transform: scale(1.04); transition: transform 1.2s var(--ease); }
.pc .stage > img { transition: transform 1.2s var(--ease); }

.shelf .item .bag-wrap { position: relative; aspect-ratio: 4 / 4.6; border-radius: 6px; overflow: hidden; background: var(--tone); }
.shelf .item .bag-img { width: 100%; height: 100%; object-fit: cover; }
.shelf .item:hover .bag-img { transform: scale(1.04); transition: transform 1s var(--ease); }

.pdp .main-stage { background: var(--tone, var(--paper-2)); border-radius: 10px; overflow: hidden; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.pdp .gal { position: relative; }

/* ---------- 购物袋抽屉：真实订单行 ---------- */
#cart .ci .th { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--tone); }
#cart .ci .th img { width: 100%; height: 100%; object-fit: cover; }
#cart .ci h5 { margin: 0; font-family: var(--sans-cn); font-size: 15px; }
#cart .ci .s { font-size: 12px; color: var(--fg-2); }
#cart .ci .qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
#cart .ci .qty button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; line-height: 1; }
#cart .db .empty { padding: 28px 4px; }
#cart .df .line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
#cart .df .bulk .lab { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
#cart .df .bulk .bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
#cart .df .bulk .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .6s var(--ease); }
#cart .df .bulk .bar i[style*="--w"] { width: var(--w); }
#cart .df .bulk .bar i { width: var(--w, 0); }

/* 加购飞入 */
.flyer { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%);
  transition: transform .8s cubic-bezier(.4, .6, .2, 1), opacity .8s ease; will-change: transform; }

/* 徽章跳动 */
.cart-badge.bump { animation: nzBump .5s var(--ease); }
@keyframes nzBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- 查验页 ---------- */
.cert.blur .who, .cert.blur .what { filter: blur(5px); }
.verify-page .search input { font-family: var(--serif-lat); }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
.result dt { color: var(--fg-2); }
.result .note { font-size: 12px; color: var(--fg-2); max-width: 46em; margin-top: 16px; }

/* ---------- 账户页登录卡 ---------- */
.acct .nz-login .field { display: block; margin-bottom: 12px; }
.acct .nz-login .field span { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 4px; }
.acct .nz-login input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-family: var(--sans-cn); font-size: 15px; }
.acct .lay { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }

/* ---------- WooCommerce 自带页面（购物车 / 结账 / 我的账户的表单） ---------- */
/* 注意：body 本身带 .woocommerce 类，所以这里**不能**给 .woocommerce 设宽度/外边距——
   那会把整个页面（含自已的商店页与页脚）压到 1080 并多出 120px 上边距；
   .woocommerce a 更会把 .cross 里的白字染成墨色。只给 Woo 自己生成的元素上样式。 */
.woocommerce h1, .woocommerce h2, .woocommerce h3 { font-family: var(--sans-cn); font-weight: 500; letter-spacing: .02em; }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid var(--line); padding: 12px; }
.woocommerce .button, .woocommerce button.button, .woocommerce input.button { background: var(--fg); color: var(--bg); border-radius: 99px; padding: 10px 22px; font-family: var(--sans-cn); font-size: 14px; }
.woocommerce .button:hover { opacity: .85; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--card); border-top: 2px solid var(--accent); color: var(--fg); }

/* ---------- 404 与通用页面 ---------- */
.page .section, .error404 main { padding-top: 120px; }
.wp-block-button__link { background: var(--fg); color: var(--bg); border-radius: 99px; padding: 12px 24px; }

/* ---------- 键盘可达 ---------- */
/* 设计稿没有焦点样式：键盘用户看不出当前落点。统一给一圈强调色描边，
   用 :focus-visible 只在键盘操作时出现，鼠标点击不闪。 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #c8622c);
  outline-offset: 3px;
  border-radius: 2px;
}
/* 品牌色背景上描边要更亮，免得和底图糊在一起 */
body[data-section="home"] :where(a, button):focus-visible,
body[data-section="academy"] :where(a, button):focus-visible {
  outline-color: #fff6ec;
}

/* WP 的跳过链接：默认是 .screen-reader-text，块主题不带样式 */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  /* .screen-reader-text 里的 !important 会盖掉普通声明，这里必须同样用 !important */
  position: fixed !important;
  top: 10px; left: 10px;
  z-index: 100000;
  width: auto !important; height: auto !important;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ink, #151412);
  color: var(--paper, #f4efe6);
  clip-path: none !important;
  font-size: 14px;
}

/* ---------- 商店「课程 / 器具」图文块：白字压在浅色照片上看不清 ---------- */
/* 设计稿的渐变只有 0.65 的不透明度，右图是浅色石纹，白字仍发灰。
   主题层把底部压得更实，并给文字一点投影；site.css 保持与设计稿一致。 */
.cross a::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .9) 100%);
}
.cross a div { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 18px rgba(0, 0, 0, .5); }

/* ---------- 购物车 / 结账：经典短代码 + 固定头部留白 ---------- */
/* 块版购物车/结账的界面文案走 JS 语言包，线上只出英文；页面也顶到固定头部底下。
   改用 [woocommerce_cart] / [woocommerce_checkout] 这类服务端渲染的短代码。 */
/* main 自己就是容器：短代码输出不一定被 .woocommerce 包一层 */
.woocommerce-cart main,
.woocommerce-checkout main {
  max-width: 1128px; margin: 0 auto;
  padding: calc(var(--hdr, 60px) + 44px) var(--gut) 96px;
}
.woocommerce-cart h1, .woocommerce-checkout h1 { font-size: clamp(28px, 3vw, 40px); letter-spacing: .04em; margin: 0 0 24px; }

/* ---------- 页脚下面那条 24px 白边 ---------- */
/* 块主题会给顶层模板部件之间加 block-gap（默认 24px），而 parts/cart.html 是个
   高度为 0 的部件放在页脚之后 → 页脚底下多出 24px 页面底色，看着像多了一条白边。 */
.wp-site-blocks > * + * { margin-block-start: 0; }


/* ---------- 正文页（法律 / 隐私 / 条款） ---------- */
/* 注意：块模板里 wp:group 的 tagName=main 在线上并没有输出 <main>（实测），所以不能靠
   容器选择器定位，直接按 body.page 下的标题与正文自身给版心。 */
body.page .wp-block-post-title,
body.page .entry-content { max-width: 820px; margin-inline: auto; padding-inline: var(--gut); }
body.page .wp-block-post-title { margin-block: 0; padding-top: calc(var(--hdr, 60px) + 56px); font-size: clamp(30px, 3.2vw, 46px); letter-spacing: .04em; }
body.page .entry-content { padding-bottom: 110px; }
body.page .entry-content h2 { font-size: 20px; letter-spacing: .04em; margin: 34px 0 10px; }
body.page .entry-content p, body.page .entry-content li { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
body.page .entry-content ul { padding-left: 1.2em; }
body.page .entry-content em { color: #9a4b23; font-style: normal; }  /* 「待公布」要能一眼看到 */
body.page .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
body.page .entry-content .nz-legal-note { margin: 22px 0 30px; padding: 16px 18px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: 14px; line-height: 1.75; }

/* ---------- 次要文字对比度 ---------- */
/* 设计稿的 --mute（#7a726a）在纸色底上约 4.1:1，小字号正文达不到 4.5:1。
   只在主题层把它压深一档，不改设计稿；色相不变，观感几乎看不出差别。 */
:root { --mute: #6b6259; }