/* ==========================================================================
   Lsbottle · WP 专有结构样式（叠加在 main.css 设计体系之上）
   原则：凡 main.css 里已有的设计稿类（.hero/.btn/.grid/.post-card/.footer/.form/.field…）
   一律不在此重定义，模板直接用设计稿结构吃 main.css 样式。
   ========================================================================== */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

/* 按钮：仅补充 main.css 没有的变体 */
.btn--outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--outline:hover { background: var(--accent); color: var(--accent-ink); }

/* 旧版卡片（main.css 无 .card；历史模板仍在用，逐步迁往 .tcard） */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: .2s; }
.card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.card img { width: 100%; border-radius: var(--radius-s); aspect-ratio: 4/3; object-fit: cover; }

/* 博客列表容器（main.css 无 .post-list，等价 grid--3） */
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }

/* 页脚社媒（SVG 图标 + 二维码悬浮） */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; align-items: center; }
.footer-soc-item { position: relative; display: inline-flex; }
.footer-social a, .footer-soc-noimg, .footer-soc-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(0,0,0,.08); color: var(--ink); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.footer-social a:hover, .footer-soc-trigger:hover { background: rgba(0,0,0,.14); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.footer-soc-qr {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #fff; border-radius: 10px; padding: 10px;
  /* ★ 必须给显式宽度：弹层是 absolute，父级只有 34px 图标宽；
     若用 width:auto + 图片 max-width:100%，shrink-to-fit 会把二维码压到几十像素（李总 2026/11/04 反馈“非常小”）。 */
  width: 200px; max-width: none; box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease;
  z-index: 30; text-align: center;
}
.footer-soc-qr img { display: block; width: 100%; height: auto; border-radius: 4px; }
.footer-soc-qr .footer-soc-qr-cap { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-2, #6b7280); }
.footer-soc-item:hover .footer-soc-qr,
.footer-soc-item:focus-within .footer-soc-qr { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* 文章/页面正文排版 */
.entry-content { line-height: 1.75; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }

/* 作者页 */
.author-head { display: flex; gap: 20px; align-items: center; }
.author-social a { margin-right: 14px; }

/* WooCommerce 遗留结构（历史上交付过 WC 数据的站点兜底） */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.product-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-card .body { padding: 16px; }
.product-card h2 { font-size: 17px; margin: 0 0 6px; }
.product-card .price { color: var(--accent); font-weight: 700; }

/* 视频内嵌（YouTube / Bilibili / mp4 共用） */
.lsb-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.lsb-embed iframe, .lsb-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .post-list, .products { grid-template-columns: 1fr 1fr; }
  .author-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .post-list, .products { grid-template-columns: 1fr; }
}

/* ---- 环迹按钮/表单（.ct-button 等）统一对齐设计稿按钮体系（hammertone 深绿 pill） ---- */
.ct-btn, a.ct-btn, button.ct-btn, .ct-button, a.ct-button, button.ct-button,
.ct-form .ct-submit, .ct-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: var(--pill, 999px);
  background: var(--accent, #1e4034);
  color: var(--accent-ink, #f8f5ee);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease);
}
.ct-btn:hover, a.ct-btn:hover, .ct-button:hover, a.ct-button:hover,
.ct-form .ct-submit:hover, .ct-form button[type="submit"]:hover {
  background: var(--accent-hover, #2a5544);
  color: var(--accent-ink, #f8f5ee);
}
.pdp__actions .ct-btn, .pdp__actions .ct-button { width: 100%; min-height: 52px; padding: 0 26px; }
.pdp__actions .ct-btn + .ct-btn, .pdp__actions .ct-button + .ct-button {
  background: transparent;
  color: var(--ink, #17201a);
  border: 1px solid var(--line, #ddd6c8);
}
.pdp__actions .ct-btn + .ct-btn:hover, .pdp__actions .ct-button + .ct-button:hover { border-color: var(--ink, #17201a); background: transparent; }
.cta-band .ct-btn, .cta-band .ct-button { background: var(--card, #fffdf8); color: var(--ink, #17201a); }
.cta-band .ct-btn:hover, .cta-band .ct-button:hover { background: var(--bg, #f8f5ee); }
.cta-band .ct-btn + .ct-btn, .cta-band .ct-button + .ct-button { border: 1px solid rgba(255,255,255,0.4); background: transparent; color: var(--ink-inverse, #f5f2ea); }
.cta-band .ct-btn + .ct-btn:hover, .cta-band .ct-button + .ct-button:hover { border-color: var(--ink-inverse, #f5f2ea); background: transparent; }

/* ---- 七轮：内容区粘贴 SVG 兜底（无宽高属性的 svg 不再撑爆整页，如复制站带来的轮播箭头） ---- */
.entry-content svg:not([width]), .prose svg:not([width]) { width: 1em; height: 1em; max-width: 100%; }
.entry-content svg, .prose svg { max-width: 100%; height: auto; }

/* ---- 七轮：图集前后切换 ---- */
/* 注意：.pdp__gallery 不在此设 position，由 main.css 控制（桌面 sticky / 移动端 static），
   否则 theme.css 的 position:relative 会压过 main.css 移动端 static，导致残留 top 偏移造成错位 */
.pdp__main { position: relative; }
.pdp__nav {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.pdp__nav button {
  pointer-events: auto;
  width: 40px; height: 40px; border-radius: var(--pill, 999px);
  border: 1px solid var(--line, #ddd6c8);
  background: var(--card, #fffdf8); color: var(--ink, #17201a);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-s, 0 1px 4px rgba(0,0,0,.08));
  transition: background-color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
.pdp__nav button:hover { background: var(--accent, #1e4034); border-color: var(--accent, #1e4034); color: var(--accent-ink, #f8f5ee); }
.pdp__count {
  pointer-events: auto;
  padding: 6px 14px; border-radius: var(--pill, 999px);
  background: rgba(23,32,26,.55); color: #fff;
  font-size: .8125rem; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .pdp__count { background: rgba(255,255,255,.18); }
.pdp__nav button:focus-visible { outline: 2px solid var(--accent, #1e4034); outline-offset: 2px; }

/* ---- 七轮：产品参数卡（设计稿 product.html grid--4 形态） ---- */
.author-card > b { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; }
.author-card > p { margin: 8px 0 0; }

/* ---- 七轮：行数截断（clamp-1 单行 / clamp-3 三行 + 展开按钮） ---- */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.clamp-btn {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--accent, #1e4034); text-decoration: underline; text-underline-offset: 3px;
}
.clamp-btn:hover { color: var(--accent-hover, #2a5544); }
[data-theme="dark"] .clamp-btn { color: var(--accent-ink, #f8f5ee); }
[data-theme="dark"] .clamp-btn:hover { text-decoration-color: var(--accent-ink, #f8f5ee); }

/* ---- 七轮：文章头部作者卡 ---- */
.article-author {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 14px; border: 1px solid var(--line, #ddd6c8);
  border-radius: var(--radius, 14px); background: var(--card, #fffdf8);
  color: inherit; text-decoration: none; max-width: 560px;
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.article-author:hover { border-color: var(--ink, #17201a); box-shadow: var(--shadow-s, 0 1px 4px rgba(0,0,0,.06)); }
.article-author img { width: 48px; height: 48px; border-radius: var(--pill, 999px); object-fit: cover; flex: 0 0 auto; }
.article-author__txt { display: flex; flex-direction: column; min-width: 0; }
.article-author__txt b { font-size: .9375rem; font-weight: 600; }
.article-author__txt > span:not(.article-author__more) { font-size: .8438rem; color: var(--ink-2, #5c6660); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.article-author__more { font-size: .8125rem; color: var(--accent, #1e4034); font-weight: 600; }
[data-theme="dark"] .article-author__more { color: var(--accent-ink, #f8f5ee); }
.article-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong, #c9c2b2); }
.article-meta a:hover { color: var(--accent, #1e4034); text-decoration-color: currentColor; }
[data-theme="dark"] .article-meta a:hover { color: var(--accent-ink, #f8f5ee); }

/* ---- 七轮：文章分页（the_posts_pagination 默认标记 → 主题 pill 风格） ---- */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: clamp(40px,6vw,64px) 0 0; }
.nav-links .page-numbers {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill, 999px); border: 1px solid var(--line, #ddd6c8);
  background: var(--card, #fffdf8); color: var(--ink, #17201a);
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s var(--ease, ease), border-color .2s var(--ease, ease), color .2s var(--ease, ease);
}
.nav-links a.page-numbers:hover { border-color: var(--ink, #17201a); }
.nav-links .page-numbers.current { background: var(--accent, #1e4034); border-color: var(--accent, #1e4034); color: var(--accent-ink, #f8f5ee); }
.nav-links .page-numbers.dots { border: 0; background: none; min-width: auto; padding: 0 4px; color: var(--ink-2, #5c6660); }
.nav-links .page-numbers.prev, .nav-links .page-numbers.next { font-size: 1.05rem; }
.nav-links .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); }

/* ---- 七轮：语言切换菜单锚点形态（main.css 只定义了 button，这里补 a） ---- */
.lang__menu a {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; color: var(--ink, #17201a);
  text-decoration: none; text-align: left; white-space: nowrap;
}
.lang__menu a:hover { background: var(--bg-alt, #efe9dc); }
.lang__menu a span { font-size: .8125rem; color: var(--ink-2, #5c6660); letter-spacing: .04em; }
.lang__menu a.is-active { background: var(--accent-soft, #e4ede7); color: var(--accent, #1e4034); font-weight: 600; }
[data-theme="dark"] .lang__menu a.is-active { color: var(--accent-ink, #f8f5ee); }

/* ---- 七轮补丁：图集缩略图横向滚动（多于 4 张不再换行挤压标题） ---- */
.thumbs {
  display: grid;
  grid-template-columns: none; /* 覆盖 main.css 的 repeat(4,1fr)，避免显式列与隐式列宽窄不均导致错位 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { aspect-ratio: 1; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 八轮：博客卡片美化（标题 1 行截断 / 概述 2 行 / 卡片等高、meta 贴底） ---- */
/* 标题截断规则由 main.css 的 .post-card__body h3 提供（clamp:1），此处不得覆盖 */
.post-card__body { flex: 1; display: flex; flex-direction: column; }
.post-card__body .pcard-ex {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 0 10px; color: var(--ink-2, #5c6660);
}
.post-card__body .post-card__meta { margin-top: auto; padding-top: 2px; }

/* ---- 八轮：翻页与下个区块保持距离 ---- */
.nav-links { margin-bottom: clamp(48px, 7vw, 80px); }

/* ---- 八轮：PDP 单图时的图下信任卡（替代空缩略图区，使左列饱满） ---- */
.pdp__perks {
  margin-top: 14px; padding: 20px 22px;
  border: 1px solid var(--line, #ddd6c8); border-radius: var(--radius, 14px);
  background: var(--card, #fffdf8);
}
.pdp__perks-head {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2, #5c6660); margin-bottom: 14px;
}
.pdp__perks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pdp__perks li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .9375rem; line-height: 1.55; color: var(--ink-2, #5c6660);
}
.pdp__perks li b { color: var(--ink, #17201a); font-weight: 600; }
.pdp__perks-ic {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill, 999px); background: var(--accent-soft, #e4ede7);
  color: var(--accent, #1e4034); font-size: .6875rem; font-weight: 700;
}
.pdp__perks-link {
  display: inline-block; margin-top: 16px; font-size: .9375rem; font-weight: 600;
  color: var(--accent, #1e4034); text-decoration: none;
}
.pdp__perks-link:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .pdp__perks-link { color: var(--accent-ink, #f8f5ee); }
[data-theme="dark"] .pdp__perks-ic { color: var(--accent-ink, #f8f5ee); }