/* ==========================================================================
   PSQ —— WordPress 兼容层
   加载在 main.css / shop.css 之后。
   这里只放两件事：
     1. 把 WordPress 生成的标记（wp_nav_menu、对齐类、admin bar）接到设计稿的样式上
     2. 设计稿没覆盖到的状态（无数据、无图、后台登录条）
   不在这里改设计 token —— 配色与排版在 main.css 里改。
   ========================================================================== */

/* ------------------------------------------------- 登录工具栏顶开的偏移 ---
   未登录访客看不到这条，但你自己在后台点「查看站点」时避免粘性导航盖住。 */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ------------------------------------------------------ 主导航的 WP 标记 ---
   设计稿里 .nav__links 直接装 <a>；wp_nav_menu 会多套一层 <ul><li>。
   让这层 ul 承担 flex 布局，其余样式沿用设计稿。 */
.nav__links ul {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links li { display: block; }
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a {
  color: var(--text);
  border-bottom-color: var(--red);
}
/* 后台菜单是中文的，但前台导航文字应该全英文 —— 由「外观 → 菜单」里
   直接填英文解决，这里不做自动翻译。 */

/* -------------------------------------------------------------- 页脚导航 ---
   同一套处理，页脚那几列也由菜单驱动。 */
.foot__nav { list-style: none; margin: 0; padding: 0; }
.foot__nav li { display: block; }
.foot__nav a { display: block; font-size: 14px; padding: 5px 0; }
.foot__nav a:hover { color: var(--on-dark); }

/* ---------------------------------------- 产品图：别被 width/height 钉死 ---
   WordPress 的 wp_get_attachment_image() 会给 <img> 打 width="640"
   height="480"（来自 add_image_size( 'psq-card', 640, 480 )）。这两个属性在
   CSS 没有显式声明 height 时代替 auto 生效，把图片盒的高度钉死在 480px。

   设计稿是手写 HTML、没有这组属性，所以从没暴露。真正接到 WP 数据后，
   四个图片位全被顶坏：
     .pcard__img    盒 309×232、图渲染 269×480 → 溢出 288px，被
                    overflow:hidden 裁得只剩上沿一条
     .gal__main     盒子被撑到 540 高（设计是 4/3 = 451），主图缩水、留白变大
     .gal__th       缩略图被撑到 498 高（设计是 4/3 = 69），一排竖条
     .scard__img    首屏展示厅图区高了一倍多
   设计稿里的 max-height:100% 拦不住：百分比高度依赖容器高度，而容器的
   高度是 aspect-ratio 从宽度推出来的，这种循环依赖在浏览器里解析为 auto。

   解法 —— 不再依赖百分比，让图片绝对定位填满容器：
     · inset:0 把盒子定到容器的 padding box，width/height:100% 撑满它
     · 留白改由 img 自己的 padding 提供（值 = 容器原来的 padding），
       box-sizing:border-box 保证 100% 里含 padding
     · 居中交给 object-fit: contain，与设计稿视觉一致
   ⚠️ 不能图省事写 width:auto 交给 inset 拉伸 —— <img> 是替换元素，
   绝对定位下 width:auto 取的是图片固有宽度，不会像普通 div 那样被
   left/right 撑开（CSS 2.1 §10.3.8）。踩过。
   另一条路是删掉 img 的 width/height 属性，但那会丢掉 WP 的响应式图片
   尺寸提示与首屏防抖，属于治标；容器已有确定比例，让图片服从容器才对。
   ⚠️ 以后若改这四个容器的 padding，下面的 --psq-inset 必须同步。 */
.pcard__img,
.gal__main,
.gal__th,
.scard__img { position: relative; }

/* 留白值 —— 依次对应 main.css / shop.css 里各容器的 padding。
   展示厅那一处原本把 28px 写在 img 自身的 padding 上，这里取同值。
   展示厅容器还要自己定高：原先它的高度是被 img 撑出来的，现在 img 已
   脱离文档流，改由 4/3 决定（与设计稿 img 的比例一致）。 */
.pcard__img  { --psq-inset: 20px; }
.gal__main   { --psq-inset: 30px; }
.gal__th     { --psq-inset: 8px;  }
.scard__img  { --psq-inset: 28px; aspect-ratio: 4 / 3; }

.pcard__img > img,
.pcard__img > .psq-ph,
.gal__main > img,
.gal__main > .psq-ph,
.gal__th > img,
.gal__th > .psq-ph,
.scard__img > img,
.scard__img > .psq-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  padding: var(--psq-inset);
  object-fit: contain;
}

/* ------------------------------------------------------- 无内容时的占位 ---
   产品矩阵还在上传，某个位置暂时没有数据是正常的。
   占位块保持版面完整，不塌陷、不留破图。 */
.psq-ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* 列表为空时的整块提示 */
.psq-empty {
  grid-column: 1 / -1;
  padding: 64px 24px;
  text-align: center;
  background: var(--paper);
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.7;
}
.psq-empty b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-2);
}

/* ------------------------------------------------------- WordPress 基础 ---
   主题检查与无障碍都要求这些类存在且行为正确。 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--paper);
  clip-path: none;
  color: var(--text);
  display: block;
  font-size: 14px;
  height: auto;
  left: 16px;
  line-height: 1.6;
  padding: 14px 20px;
  text-decoration: none;
  top: 16px;
  width: auto;
  z-index: 100000;
  border: 1px solid var(--text);
}
.skip-link { position: absolute; left: -9999px; }

/* 编辑器里插入的图片对齐方式 */
.alignleft {
  float: left;
  margin: 6px 26px 18px 0;
}
.alignright {
  float: right;
  margin: 6px 0 18px 26px;
}
.aligncenter {
  display: block;
  margin: 18px auto;
}
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size: 12.5px;
  color: var(--text-3);
  padding-top: 8px;
}

/* 页面正文（关于页这类用可视化编辑器写的页面） */
.page-prose { max-width: 760px; }
.page-prose h2 { margin: 40px 0 14px; }
.page-prose h3 { margin: 30px 0 12px; }
.page-prose p { margin-bottom: 16px; font-size: 15.5px; line-height: 1.8; color: var(--text-2); }
.page-prose ul, .page-prose ol { margin: 0 0 18px 22px; color: var(--text-2); }
.page-prose li { margin-bottom: 8px; line-height: 1.75; }
.page-prose a { color: var(--red); }
.page-prose a:hover { text-decoration: underline; }
.page-prose img { margin: 22px 0; }

/* --------------------------------------------------------- 分页（WP 版）--- */
.pager .page-numbers {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}
.pager .page-numbers:hover { border-color: var(--text); color: var(--text); }
.pager .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------------------ 询价篮页 --- */
.psq-basket__row {
  display: grid;
  grid-template-columns: 1fr 132px 96px;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.psq-basket__t { font-size: 15px; font-weight: 500; }
.psq-basket__m { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-top: 5px; }
.psq-basket__del { font-size: 13px; color: var(--red); cursor: pointer; }
.psq-basket__form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.psq-basket__f { display: flex; flex-direction: column; gap: 7px; }
.psq-basket__f span {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.psq-basket__f input,
.psq-basket__f textarea {
  border: 1px solid var(--line);
  padding: 12px 14px;
  outline: none;
  font-size: 14.5px;
}
.psq-basket__f input:focus,
.psq-basket__f textarea:focus { border-color: var(--text); }
.psq-basket__f--wide { grid-column: 1 / -1; }

@media (max-width: 680px) {
  .psq-basket__row { grid-template-columns: 1fr; gap: 12px; }
  .psq-basket__form { grid-template-columns: 1fr; }
}