/* =========================================================================
   Jinaria Yuna — The Boutique（第七版）
   -------------------------------------------------------------------------
   1. 全站动态背景（柔光色块 + 极淡细竖线 + 颗粒），随滚动/鼠标视差
   2. 家居场景层：只留两张同调性的房间图（客厅 / 通透采光角），
      随浏览的板块淡入切换 —— 整个网站都活在同一个家里
   3. 版块封面：横向轨道，大标签 + 家居图底
   4. 商品栏 / 选品志：同样横向轨道，桌面一屏 4-6 个、手机 2-3 个，配左右箭头
   5. 原页内容全部搬回：公告栏 / 信任条 / 介绍带 / 四卖点 / 品牌故事 ×2 /
      完整页脚 / 购物车抽屉 / 回到顶部
   ========================================================================= */

:root{
  --paper:#fdfcfa;
  --paper-2:#f6f3ed;
  --ink:#1b1916;
  --ink-2:#57534d;
  --muted:#8f8a81;
  --line:#e8e3da;
  --brass:#ad8a5c;
  --brass-2:#c9a878;
  --brass-soft:#e8dcc4;
  --sage:#8b9a86;
  --serif:"Cormorant Garamond","Songti SC","Noto Serif SC",Georgia,serif;
  --sans:"Assistant","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-out:cubic-bezier(.16,.84,.3,1);
  --panel:rgba(253,252,250,.9);
  /* 视差（JS 写入）：鼠标偏移 / 滚动位置 */
  --mx:0;--my:0;--sy:0;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:104px;
  /* 根元素也要裁一次横向溢出 —— 只写在 body 上是不够的。
     实测根因：装饰性全屏背景层 .bg-field / .bg-sea 是 position:fixed，
     它们的包含块是「初始包含块」，宽度取 window.innerWidth（含 2px 的传统滚动条），
     而布局宽度是 documentElement.clientWidth（不含）。两者差 2px，
     于是 document.scrollWidth 永远比 clientWidth 大 2，
     任何「有没有横向溢出」的体检都会一直报红（实测 390 / 392）。
     在 html 上补这条之后 innerWidth 与 clientWidth 对齐，
     scrollWidth 392 → 390，首屏与背景层宽度也都回到 390（已实测）。
     注：根元素上 overflow-x:hidden 配 overflow-y:visible，
     溢出轴的实用值会变成 auto，也就是正常竖向滚动不受影响（已实测）。
     ⚠️ 这条保持 hidden 不动 —— 页眉吸顶失效的锅不在 html，在 body，见下。 */
  overflow-x:hidden;
}
body{
  font-family:var(--sans);background:transparent;color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;

  /* 横向溢出的闸门：这里必须是 clip，**不能是 hidden**。
     ------------------------------------------------------------------
     2026-09-21 修正。大师兄原话：「各页往上滚的时候，页眉的标题栏和信息栏
     要锁定在顶部。」而实测页眉根本没锁住：about / faq / my-account 上滚到
     y=900 后，页眉 box.top = -900 —— 整条跟着页面滚走了。

     根因：overflow 不是 visible 的元素会成为「滚动容器」，而 position:sticky
     是相对「最近的滚动容器」吸附的。body 写成 overflow-x:hidden 时它自己就
     成了滚动容器，于是它的直接子元素 <header class="bt-top">（含通告条
     .bt-announce 与品牌行 .bt-bar）的 position:sticky;top:0 彻底失效。

     overflow:clip 与 hidden 的差别正在这里：只裁剪、**不生成可滚动区域**。
     横向溢出的闸门照旧，sticky 却完好。
     实测（改后复验）：
       · about / faq / my-account 在 1366 与 390 下滚动后页眉 top 均为 0，
         通告条也一起锁在顶部；
       · 390 / 360 / 320 / 1366 四档宽度均无可见横向滚动条、页面不可横向拖动。 */
  overflow-x:clip;
}
img{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--brass-soft)}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---------- 通用：下划线扫过（所有可点文字的 hover 动效） ---------- */
.u-line{position:relative}
.u-line::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.9;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.u-line:hover::after,.u-line:focus-visible::after{transform:scaleX(1)}

/* ---------- 通用按钮 ----------
   ⚠️ 选择器里同时保留了上游主题的类名（.btn / .btn--gold /
   .btn--ghost / .btn--sm / .btn--block）。原因：上游主题的按钮就是这几个类名，
   而装在这套主题上的插件仍在按原类名输出按钮 —— 例如 jinaria-logistics 的
   [jp_track_order] 提交按钮输出的是 class="btn btn--gold"，如果主题只认
   .btn-gold，那个按钮就会掉样式、变成没有底色的裸按钮。
   所以这里做一层「原类名 → 本主题外观」的映射，插件按钮自动跟上主题风格。 */
/* ⚠️ 配色口径（2026-09-21 按大师兄要求定）：
   主按钮底色一律用**本站主题色 brass 金**，不再是墨色；
   鼠标悬停时底色**变浅**（--brass-2），字色转为墨色以保证浅底上的可读性。
   原话：「各页面按钮的底色。不应该是黑色，而是整个网页的主题色，
   点进去以后变成浅色。」
   一处定义全局生效：本主题所有主按钮（页脚订阅、购物车抽屉 Checkout、
   404 CTA、插件按钮）都走 .btn-gold；WooCommerce 原生按钮与 .alt 主按钮
   另有同口径规则，见 inner.css 第 10 节。 */
.btn-gold,.btn--gold{
  position:relative;display:inline-block;overflow:hidden;
  padding:14px 38px;border-radius:999px;
  background:var(--brass);color:#fff;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
}
.btn-gold::after,.btn--gold::after{
  content:"";position:absolute;top:0;bottom:0;width:44%;left:-60%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn-gold:hover,.btn--gold:hover{background:var(--brass-2);color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px rgba(140,108,64,.3)}
.btn-gold:hover::after,.btn--gold:hover::after{left:120%}
.btn-gold.btn--block,.btn--gold.btn--block{display:block;text-align:center;padding:13px 20px}
.btn--sm{padding:10px 24px;font-size:11px;letter-spacing:.18em}

.btn-ghost,.btn--ghost{
  display:inline-block;padding:13px 30px;border-radius:999px;
  border:1px solid var(--brass);color:var(--brass);background:none;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
}
.btn-ghost:hover,.btn--ghost:hover{background:var(--brass);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(140,108,64,.24)}
.btn--block{display:block;text-align:center}
.btn-ghost.btn--block{display:block;text-align:center;padding:12px 20px}

/* =========================================================================
   1. 动态背景层
   ========================================================================= */
.bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-p{
  position:absolute;inset:-25%;will-change:transform;
  transform:translate3d(
    calc(var(--mx) * var(--kx,.5px)),
    calc(var(--my) * var(--ky,.5px) + var(--sy) * var(--ks,-.05px)),
    0);
}
.bg-blobs{
  position:absolute;inset:0;
  background:
    radial-gradient(34% 38% at 15% 18%,rgba(201,168,120,.34),rgba(201,168,120,0) 62%),
    radial-gradient(30% 34% at 85% 14%,rgba(139,154,134,.24),rgba(139,154,134,0) 64%),
    radial-gradient(40% 44% at 72% 82%,rgba(214,183,158,.30),rgba(214,183,158,0) 66%),
    radial-gradient(28% 30% at 24% 88%,rgba(201,168,120,.24),rgba(201,168,120,0) 64%);
  animation:bgDrift 56s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%  {transform:scale(1)    translate3d(0,0,0)}
  50% {transform:scale(1.09) translate3d(-2.6%,1.6%,0)}
  100%{transform:scale(1.04) translate3d(2.2%,-2.2%,0)}
}
/* 极淡的细竖线 —— 给画面一点结构感和高级感 */
.bg-lines{
  position:absolute;inset:0;opacity:.85;
  background-image:linear-gradient(90deg,rgba(173,138,92,.07) 1px,transparent 1px);
  background-size:min(17vw,210px) 100%;
  animation:bgSlide 90s linear infinite;
}
@keyframes bgSlide{from{background-position:0 0}to{background-position:calc(min(17vw,210px) * 6) 0}}
/* 顶部一束很淡的暖光 */
.bg-halo{
  position:absolute;inset:0;
  background:radial-gradient(46% 34% at 62% 6%,rgba(255,238,214,.75),rgba(255,238,214,0) 70%);
}
/* 颗粒质感（静态，不参与视差） */
.bg-grain{
  position:absolute;inset:0;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* =========================================================================
   1b. 家居场景层 —— 只留两张房间图，随浏览板块淡入切换
   -------------------------------------------------------------------------
   背景只提供氛围与色温，不提供可辨认的细节；但也不能糊到看不清是房间，
   所以：模糊 6.5px（原 11px）、放大 1.10（原 1.18）、薄纱 .36（原 .44）。
   ========================================================================= */
.bg-sea{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* 背景里现在有窗框/纱帘这类"建筑"元素，只做极轻的呼吸：摆动过大会让整间屋子晃 */
  animation:seaDrift 36s ease-in-out infinite alternate;will-change:transform}
@keyframes seaDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.03) translate(-0.5%,0.4%)}}
/* 视频播放失败（ autoplay 被拦）时：CSS 动画顶上，走得更快更明显 */
.bg-sea.no-video{animation-duration:20s}
.bg-sea.no-video .sea-shimmer{opacity:1}
.bg-sea img,.bg-sea video{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:saturate(.96) contrast(1.01);
  /* 鼠标视差压到极小：窗外是"窗框+纱帘"的实景，位移大了会像屋子在滑 */
  transform:scale(1.05) translate3d(calc(var(--mx)*-.05px),calc(var(--my)*-.04px + var(--sy)*-.004px),0);
  will-change:transform}
/* 海面波光：一道柔光带在画面下 2/3 缓慢游走，做出"水是动的"错觉 */
.sea-shimmer{position:absolute;inset:-10%;
  background:linear-gradient(112deg,transparent 32%,rgba(255,252,244,.07) 45%,rgba(255,255,255,.11) 50%,rgba(255,252,244,.07) 55%,transparent 68%);
  background-size:240% 240%;
  animation:sea 9s ease-in-out infinite;mix-blend-mode:screen}
.sea-shimmer.s2{
  background:linear-gradient(64deg,transparent 38%,rgba(255,255,255,.055) 50%,transparent 62%);
  animation:sea 15s ease-in-out infinite reverse;opacity:.9}
@keyframes sea{
  0%,100%{background-position:18% 78%}
  50%{background-position:82% 30%}
}
/* 暖白薄纱：保证前景卡片可读，但不糊掉海景 */
.bg-veil{position:absolute;inset:0;
  /* 只保留顶部一层保页眉可读；中下部完全清零——板块缝隙里的海不再发白 */
  background:linear-gradient(180deg,rgba(253,252,250,.3) 0%,rgba(253,252,250,.1) 10%,rgba(253,252,250,0) 22%,rgba(253,252,250,0) 100%)}

/* =========================================================================
   2. 页眉：公告栏 + 品牌 / 索引栏 / 搜索 / 语言 / 货币 / 购物车
   ========================================================================= */
.bt-top{
  position:sticky;top:0;z-index:60;color:var(--ink);
  background:rgba(253,252,250,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* ---- 公告栏（原页 .announce 搬回） ---- */
.bt-announce{
  padding:8px 20px;text-align:center;
  background:rgba(27,25,22,.94);color:rgba(255,255,255,.9);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
}
.bt-announce b{color:var(--brass-2);font-weight:600}

/* ---- 主行 ---- */
.bt-bar{display:flex;align-items:center;gap:20px;padding:15px 34px}
.bt-brand{flex:0 0 auto;font-family:var(--serif);font-size:21px;letter-spacing:.42em;font-weight:500}
.bt-brand.u-line::after{right:.42em}

/* min-width:0 是页眉折叠判定的前提：默认 min-width:auto（= 内容宽）时
   导航不肯被压窄，空间不够就直接与右侧工具区重叠 —— 重叠不产生
   scrollWidth 溢出，于是 boutique.js 的 measureNav() 测不到。 */
.bt-nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center;gap:20px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bt-nav a{transition:color .25s;white-space:nowrap}
.bt-nav a:hover{color:var(--brass)}

.bt-tools{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-left:auto}

/* ---- 搜索 ---- */
.bt-search{position:relative;display:flex;align-items:center}
.bt-search-btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);
  transition:background .25s,color .25s,transform .35s var(--ease);
}
.bt-search-btn:hover{background:rgba(173,138,92,.13);color:var(--brass);transform:scale(1.06)}
.bt-search.is-open .bt-search-btn{color:var(--brass)}
.bt-search-input{
  width:0;padding:0;opacity:0;border:none;background:transparent;outline:none;
  font-family:var(--sans);font-size:13px;color:var(--ink);letter-spacing:.02em;
  transition:width .45s var(--ease),opacity .3s .08s,padding .45s var(--ease);
}
.bt-search-input::placeholder{color:var(--muted)}
.bt-search-input::-webkit-search-cancel-button{display:none}
.bt-search.is-open .bt-search-input{width:180px;opacity:1;padding:0 4px 0 6px}
.bt-search-panel{
  /* 靠右对齐而非左移 46px —— 页眉右侧元素精简后，左移会把面板顶出视口，撑出横向滚动条 */
  position:absolute;top:calc(100% + 14px);right:0;width:322px;
  padding:8px;border-radius:14px;
  background:var(--panel);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 24px 60px rgba(64,52,34,.16);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;
  pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.bt-search-panel.is-show{opacity:1;transform:none;pointer-events:auto}
.sr{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:8px 10px;border-radius:9px;text-align:left;
  transition:background .25s,transform .3s var(--ease);
}
.sr:hover{background:rgba(173,138,92,.12);transform:translateX(3px)}
.sr img{width:36px;height:36px;border-radius:7px;object-fit:cover;background:#f0ece4;flex:0 0 auto}
.sr .sr-ico{
  width:36px;height:36px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(173,138,92,.14);color:var(--brass);font-family:var(--serif);font-size:16px;
}
.sr .sr-tx{flex:1 1 auto;min-width:0}
.sr .sr-tx em{display:block;font-style:normal;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .sr-tx i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr b{flex:0 0 auto;font-size:12px;color:var(--brass);font-weight:600}
.sr-empty{padding:13px 12px;font-size:12px;color:var(--muted);letter-spacing:.03em}


/* ---- 语言 / 货币：紧凑下拉 ----
   形态参照参考站页眉：两个小胶囊，不占地方、不抢视觉。
   为什么不用插件原生控件：FOX 的 ddslick 会渲染成「币种代码 + 符号 + 币种全名」三行大盒子，
   TranslatePress 会渲染成带内边距的大胶囊 —— 两者塞进页眉都会把整行撑变形。 */
.jy-sw{position:relative;display:inline-flex;align-items:center}
.jy-sw-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:border-color .25s,color .25s,background .25s;
}
.jy-sw-btn:hover,.jy-sw.is-open .jy-sw-btn{
  border-color:var(--brass-2);color:var(--brass);background:rgba(201,168,120,.1);
}
.jy-sw-btn:focus-visible{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(173,138,92,.16)}
.jy-sw-btn:disabled{cursor:default}
.jy-sw--cur .jy-sw-v{color:var(--brass);font-weight:600;letter-spacing:.02em}
.jy-sw-c{
  width:0;height:0;margin-left:1px;opacity:.65;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  transition:transform .3s var(--ease);
}
.jy-sw.is-open .jy-sw-c{transform:rotate(180deg)}

/* 下拉面板：用 visibility 控制显隐（比 hidden 属性更好，能让淡入淡出动画生效） */
.jy-sw-menu{
  position:absolute;top:calc(100% + 10px);left:50%;
  min-width:158px;padding:6px;border-radius:13px;z-index:70;
  background:var(--panel);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 22px 52px rgba(64,52,34,.16);
  visibility:hidden;opacity:0;pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility .25s;
}
.jy-sw.is-open .jy-sw-menu{visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.jy-sw-menu button,.jy-sw-menu a{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:8px;text-align:left;
  font-size:12px;color:var(--ink-2);
  transition:background .22s,color .22s;
}
.jy-sw-menu button:hover,.jy-sw-menu a:hover{background:rgba(173,138,92,.13);color:var(--brass)}
.jy-sw-menu button[aria-current],.jy-sw-menu a[aria-current]{color:var(--brass)}
.jy-sw-menu b{font-size:10.5px;font-weight:700;letter-spacing:.12em;min-width:28px}
/* 货币符号只出现在货币下拉里（语言下拉的第二格换成了国旗，见下） */
.jy-sw--cur .jy-sw-menu span{color:var(--brass);font-weight:600;min-width:12px}
.jy-sw-menu button[aria-current]::after{content:"\2713";font-size:11px;color:var(--brass);margin-left:auto}

/* ---- 语言下拉里的国旗 ----
   内联 SVG（helpers.php 的 jy_flag_svg()），不用 emoji：
   Windows 的 Chrome / Edge 不渲染 🇺🇸 这类旗帜 emoji，会退化成「US」两个字母。
   自己画则跨系统、跨浏览器完全一致。 */
.jy-fl{
  display:inline-flex;width:18px;height:12.6px;border-radius:2px;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(27,25,22,.12);
}
.jy-fl svg{width:100%;height:100%;display:block}
.jy-fl--txt{
  width:auto;height:auto;padding:0 5px;border-radius:3px;box-shadow:none;
  font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--muted);background:var(--paper-2);
}
/* 语言下拉只有「代码 + 旗帜」两格，面板不必像货币那么宽 */
.jy-sw--lang .jy-sw-menu{min-width:112px}

/* ---- 购物车：只有图标 + 数量角标，不带文字 ----
   数量为 0 时 PHP 不输出数字，CSS 的 :empty 就把整个角标收起来。 */
.bt-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:var(--ink-2);
  transition:background .25s,color .25s,transform .35s var(--ease);
}
.bt-cart:hover{background:rgba(173,138,92,.13);color:var(--brass);transform:scale(1.04)}
.bt-cart .jy-cart-num{
  position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;
  display:grid;place-items:center;padding:0 4px;border-radius:999px;
  background:var(--brass);color:#fff;
  font-family:var(--sans);font-size:9.5px;font-weight:700;line-height:1;letter-spacing:0;
}
.bt-cart .jy-cart-num:empty{display:none}

/* ---- 汉堡按钮（只在手机端出现，见下方 ≤760px 断点） ----
   三条细线；展开时上下两条交叉成 ✕。 */
.bt-burger{
  display:none;
  width:34px;height:34px;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:50%;
  transition:background .25s;
}
.bt-burger span{
  display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink-2);
  transition:transform .3s var(--ease),opacity .2s,background .25s;
}
.bt-burger:hover{background:rgba(173,138,92,.13)}
.bt-burger:hover span{background:var(--brass)}
.bt-burger.is-active span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.bt-burger.is-active span:nth-child(2){opacity:0}
.bt-burger.is-active span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* 窄屏页眉 —— 2026-09-21 改版
   -------------------------------------------------------------------------
   老规则是「导航换到第二行整行显示 + 可横向滑动」：
     .bt-bar{flex-wrap:wrap} + .bt-nav{order:3;flex:1 0 100%;overflow-x:auto}
   大师兄在 ≤1180px 的窗口下看到的「页眉被硬塞成两行」就是它：
   导航被整条挤到品牌下方。他的要求是：
     「如果那一行放不下的话，你就把板块折叠成下拉菜单，不要出现硬塞到
       两行的情况，放得下就一行，放不下就塞到下拉菜单里面。」

   现在这里不再放开换行 —— 导航要么老老实实待在一行，要么整组收进
   汉堡下拉（见下面 .nav-collapsed 那一组规则）。
   触发由 boutique.js 的 measureNav() 按**实测**决定：
   导航项折行 或 横向溢出 → 给 .bt-bar 加 .nav-collapsed。
   用实测而不是写死断点的原因：导航项宽度取决于语言（英文 / 浏览器翻译后的
   中文长度不同）与条目数（About Us 下还挂着一串二级项），
   任何固定 px 断点都会在某些组合下判错。 */
@media (max-width:1180px){
  .bt-bar{flex-wrap:nowrap}
  .bt-nav{overflow:visible}
  .bt-tools{margin-left:auto}
}

/* ---- 页眉导航折叠态（boutique.js 的 measureNav() 切换这个类）----
   折叠后 .bt-nav 变成从页眉下沿展开的面板，样式与手机端那套完全一致，
   所以「汉堡按钮 → 下拉菜单」的交互、二级菜单摊平都不用再写一份。 */
.bt-bar.nav-collapsed{position:relative;flex-wrap:nowrap}
.bt-bar.nav-collapsed .bt-burger{display:inline-flex}
.bt-bar.nav-collapsed > .bt-nav{
  position:absolute;top:100%;left:0;right:0;z-index:60;
  display:none;flex-direction:column;align-items:stretch;
  margin:0;padding:6px 16px 12px;gap:0;
  background:rgba(253,252,250,.985);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 38px rgba(64,52,34,.13);
  overflow:visible;
}
.bt-bar.nav-collapsed > .bt-nav.is-open{display:flex}
.bt-bar.nav-collapsed .bt-nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
.bt-bar.nav-collapsed .bt-nav-list > li{width:100%;border-bottom:1px solid var(--line)}
.bt-bar.nav-collapsed .bt-nav-list > li:last-child{border-bottom:0}
.bt-bar.nav-collapsed .bt-nav-list > li > a{display:block;padding:13px 2px;font-size:13px;letter-spacing:.12em}
/* 二级菜单在折叠态里直接摊平（触屏没有 hover，悬停浮层没法用） */
.bt-bar.nav-collapsed .bt-nav-list .sub-menu{
  position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
  min-width:0;padding:0 0 10px 14px;box-shadow:none;background:none;border:0;
}
/* ---- 手机端页眉：汉堡·搜索 | 字标（真居中） | 货币·语言·购物车 ----
   大师兄的要求：「只显示一个下拉菜单三个杠，跟货币选择跟语言选择同一行，
   Jinaria 图标是居中的」。

   居中这件事是算出来的。390 视口实测：汉堡 14~48，字标宽 108.7px。
   字标要落在视口中心(195)，右缘就是 249.4 —— 右侧所有控件必须塞进
   249.4~376 这 126.6px 里；而「搜索+货币+语言+购物车」四个控件即使压到
   最紧也要 141.6px（搜索 28 + 货币 46 + 语言 38 + 购物车 28 + 间隙）。
   差 15px，怎么调都居中不了 —— 这就是上一版只能做「空档居中」、
   字标中心停在 119 的原因。

   所以要腾出这 15px：把搜索按钮挪到汉堡一侧（左簇 34+6+30=70px，
   远小于它右侧的 130px 预算），右簇只剩货币·语言·购物车。
   这样 360 及以上的视口都能真居中，且左右都留有间隙。
   359 以下仍放不下 → 见文件末尾 ≤359 的降级规则。 */
@media (max-width:760px){
  .bt-bar{position:relative;flex-wrap:nowrap;align-items:center;padding:11px 16px;gap:8px}

  .bt-burger{display:inline-flex}

  /* 工具区「退壳」：display:contents 让里面的搜索/货币/语言/购物车
     直接成为 .bt-bar 的弹性项，于是可以用 order 把搜索挪到汉堡旁边。
     纯 CSS，不改 header.php 的 DOM，桌面端页眉完全不受影响。 */
  .bt-tools{display:contents}
  .bt-bar > .bt-burger{order:1}
  .bt-tools > .bt-search{order:2}
  .bt-bar > .bt-brand{order:3}
  .bt-bar > .bt-nav{order:4}
  .bt-tools > .jy-sw--cur{order:5;margin-left:auto}
  .bt-tools > .jy-sw--lang{order:6}
  .bt-tools > .bt-cart{order:7}

  /* 字标：绝对居中，两侧控件不再影响它的位置。
     字号用 clamp 随视口收缩，字距比桌面略松，保持原来的呼吸感。 */
  .bt-brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    margin:0;min-width:0;
    font-size:clamp(11.5px,3.4vw,14px);letter-spacing:.14em;white-space:nowrap;
  }

  /* 导航：不再是可以横向滚动的长条，改成汉堡开合的下拉面板 */
  .bt-nav{
    order:0;position:absolute;top:100%;left:0;right:0;z-index:60;
    display:none;flex-direction:column;align-items:stretch;
    margin:0;padding:6px 16px 12px;gap:0;
    background:rgba(253,252,250,.985);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 38px rgba(64,52,34,.13);
    overflow:visible;
  }
  .bt-nav.is-open{display:flex}
  .bt-nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .bt-nav-list > li{width:100%;border-bottom:1px solid var(--line)}
  .bt-nav-list > li:last-child{border-bottom:0}
  .bt-nav-list > li > a{display:block;padding:13px 2px;font-size:13px;letter-spacing:.12em}
  /* 二级菜单在手机上直接摊平，不做悬停浮层（触屏没有 hover） */
  .bt-nav-list .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0 0 10px 14px;box-shadow:none;background:none;border:0;
  }

  /* 搜索现在在左侧：输入框向右展开、下拉面板改成左对齐（原来是右对齐） */
  .bt-search.is-open .bt-search-input{width:min(52vw,190px)}
  .bt-search-panel{left:0;right:auto;width:min(88vw,300px)}

  /* 搜索展开时头部让位 —— 字标与右侧控件先藏起来，整条页眉变成搜索条。
     不藏的话，输入框（x 86~276）会和居中字标（145~245）压在一起。 */
  .bt-bar:has(.bt-search.is-open) .bt-brand{visibility:hidden}
  .bt-bar:has(.bt-search.is-open) .jy-sw,
  .bt-bar:has(.bt-search.is-open) .bt-cart{display:none}

  .bt-announce{font-size:9.5px;letter-spacing:.1em;padding:7px 14px;line-height:1.5}
}
/* 更窄的手机：右簇继续收紧，给居中字标腾出间隙。
   预算算法：右簇左缘(376-右簇宽) 必须 ≥ 字标右缘(视口中心 + 字标宽/2)。 */
@media (max-width:620px){
  .bt-bar{padding:11px 14px;gap:6px}
  /* 字号由 clamp 随视口收缩，这里只收紧字距，避免写死字号 */
  .bt-brand{font-size:clamp(11.5px,3.2vw,13.5px);letter-spacing:.11em}
  .jy-sw-btn{padding:3px 6px;font-size:9px;letter-spacing:.06em;gap:4px}
  /* 手机上货币只留代码（USD），去掉符号 $ —— 省 10px，视觉也更干净 */
  .jy-sw--cur .jy-sw-v{display:none}
  .bt-search-btn{width:30px;height:30px}
  .bt-cart{width:30px;height:30px}
  .bt-search.is-open ~ .jy-sw,.bt-search.is-open ~ .bt-cart{display:none}
  .bt-search.is-open .bt-search-input{width:min(56vw,200px)}
  .bt-search-panel{width:min(92vw,320px)}
  .back-scene{padding:9px 14px;font-size:10.5px;right:14px;bottom:14px}
}
/* 字标再收一档 —— 360 视口右簇左缘 228.8，字标右缘要压到 225 以内 */
@media (max-width:380px){
  .bt-brand{font-size:11px;letter-spacing:.08em}
}
/* 极窄档（320~359，如 iPhone SE 一代）：真居中物理上放不下 ——
   右簇 117px + 字标一半 41px 已经超过半个视口。
   此时退回「空档居中」：字标回到文档流，在「搜索右缘 ~ 货币左缘」
   之间的空档里居中；左右控件同时再收紧一档。
   取舍：这一档字标中心会比视口中心偏左约 24px，但绝不重叠、绝不溢出。 */
@media (max-width:359px){
  .bt-brand{position:static;top:auto;left:auto;transform:none;margin:0 auto;
    font-size:11px;letter-spacing:.05em}
  .bt-tools > .jy-sw--cur{margin-left:0}
  .jy-sw-btn{padding:3px 5px;letter-spacing:.02em}
  .bt-cart{width:28px;height:28px}
}

/* =========================================================================
   3. 场景 HERO —— 四张宣传图轮播（图与文案同步切换）
   -------------------------------------------------------------------------
   2026-09-21 第 10 轮改版（大师兄）：
     「你要把上边这些文字和下边这些文字拆开，拆成两个板块的内容，
       上边文字板块给它放到主页图片的上面，压住主页图片的角来显示。
       而下边这些文字拆成另外一个板块后，放在紧挨着主页图片的下边，
       就是在主页图片与跑马信息栏的中间这里。」

   于是首屏文案**一拆为二**，DOM 分居两处、CSS 各管一段：

     .scene  ……… 主图（min-height: min(58vh, 520px)）
       ├ .scene-viewport …… 四张图轮播（绝对定位铺满整块）
       └ .hero-text ………… ① 品牌块：绝对定位，压在**主图左上角**
     .hero-cats … ② 分类块：主图下沿 → 跑马栏(.trust)之上
       └ .hero-rotator ……… 四条 .hero-copy，跟着四张图一起轮换

   ① 品牌块 = .hero-kicker（Jinaria Yuna · The Boutique）
              + .hero-h1（Small things for every day, / chosen one by one.）
   ② 分类块 = .hero-eyebrow（01 — Beauty & Grooming 之类）
              + .hero-title + .hero-line（描述，最多三行）

   轮播逻辑（boutique.js）只认 `.hero-copy`，与容器无关；
   它现在落在 .hero-cats 里，所以 JS 里的选择器已改成全文档查。

   ⚠️ 本段所有首屏选择器都必须带**容器前缀**（`.scene …` / `.hero-cats …`），
   不是随手写的。inc/dynamic-css.php 会**无条件**输出
   `body .hero-h1{font-size:var(--jy-h1-size,30px)}` 这类规则（特异性 0,1,1），
   而主题侧裸类名 `.hero-h1` 是 0,1,0 —— 永远压不过，
   改「首屏字号/颜色」会像没生效一样。带上容器前缀变成 0,2,0 才赢。
   （2026-09-21 实测过这个坑：当时「手机端白字从未生效」就是它造成的。）
   以后改这一段，请勿把这些前缀去掉。

   仍然作废、保持关闭的旧机制（不要再打开）：
     · .scene-veil（整幅左侧渐白）
     · .scene-viewport::after（顶部白雾）
     · .scene-mask
   ========================================================================= */

/* ---- 主图：整块只剩「图 + 压在角上的品牌块」 -------------------------
   品牌块改成绝对定位后，图区高度就完全由 min-height 决定
   （不再像上一版那样被图内文案撑高）。.scene-viewport 是 inset:0 的
   绝对定位层，height:100% 跟着填满这 min(58vh,520px)。 */
.scene{
  position:relative;background:var(--paper);
  min-height:min(58vh,520px);
}

/* 图片区：宽度撑满，高度取 min(58vh,520px) —— 让「图 + 图下分类块」
   在常见笔记本屏上能同屏看到。图片用 object-fit:cover 满裁。

   ⚠️ 不要图省事写成 `height:auto;aspect-ratio:1536/930;max-height:...`。
   实测（2026-09-21，Chrome）：宽度为 auto 时浏览器会用「高度上限 × 比例」
   反推宽度 —— 520 × 1.6516 = 858.8px，图区只铺到 859px，右侧露出一条纸色。
   显式 width:100% + 固定高度就不会再让比例参与宽度计算。 */
.scene .scene-viewport{
  position:absolute;inset:0;overflow:hidden;
  width:100%;height:100%;
}
/* 必须带 .scene 前缀：dynamic-css 在宽屏会输出
   `body .scene-stage{transform:translate(-50%,-50%) scale(...)}`（0,1,1），
   会把舞台重新拽回「居中放大」的老定位。 */
.scene .scene-stage{
  position:absolute;left:0;top:0;transform:none;
  width:100%;height:100%;
}
.scene .scene-viewport::after{display:none}
.scene .scene-veil{display:none}
.scene .scene-mask{display:none}

.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.05s var(--ease);will-change:opacity}
.slide.is-on{opacity:1}
.scene-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.045);transition:transform 7.4s linear;
}
.slide.is-on .scene-img{transform:scale(1)}

/* 图上那份广告语已废弃（HTML 里也已删掉该节点），留一条兜底 */
.scene-kicker{display:none}

/* ---- ① 品牌块：压在主图左上角 ----------------------------------------
   定位：贴在 .scene 的左上角（left/top 都是 0）—— 它的左上角与图片的
   左上角**重合**，看上去就是「压住图片的角」。

   文字起始位置用 max(32px, (100vw - 1180px) / 2 + 32px)：
   与 .wrap 的内容左缘**逐像素对齐**（1366 屏 = 125px），
   首屏文字才不会和它下面的分类块、以及各栏板块错位。

   背后那团柔光（::before）从图片左上角起铺，宽度 =
   后台「左侧文字区宽度」(默认 40 → 40vw) + 「柔光向右延伸」(默认 54px)，
   再叠「柔化半径」(默认 34px) 的模糊 —— 角上是一团没有硬边的米白，
   不是一块四方的白板。这三个数都在「外观 → 自定义 → 第 3 节」里可调。
   为什么还要这层雾：四张主图左上角的平均亮度是 178~220（全图最亮的一角），
   深色墨字本来就压得住；雾是给最暗那张（178）上的保险，
   顺便让文字区有个安静的底，文字不跟画面细节抢。 */
.scene .hero-text{
  position:absolute;z-index:4;
  left:0;top:0;
  width:100%;max-width:none;margin:0;box-sizing:border-box;
  padding:clamp(22px,2.6vw,34px) 0 0 max(32px,calc((100vw - 1180px) / 2 + 32px));
  background:none;
}
.scene .hero-text::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* right/bottom 必须显式写 auto：dynamic-css.php 在宽屏（≥1181px）用
     `inset: -26px calc(-1 * var(--jy-hfog-x)) -20px -26px` 给这个伪元素
     定过位（0,1,1）。本规则（0,2,0）在 top/left 上赢，但**没声明的
     right/bottom 仍会从那条 inset 简写里继承下来**，把宽度和高度拽歪。
     旧写法靠 inset 四值直接铺，所以看不出这个坑；改成 left+width 后必须补上。 */
  left:0;top:0;right:auto;bottom:auto;
  width:calc(var(--jy-hpanel-w,40) * 1vw + var(--jy-hfog-x,54px));
  height:calc(100% + 30px);
  background:linear-gradient(100deg,
    rgba(253,252,250,.97) 0%,
    rgba(253,252,250,.94) 34%,
    rgba(253,252,250,.62) 66%,
    rgba(253,252,250,0) 100%);
  filter:blur(var(--jy-hfog-blur,34px));
}

.scene .hero-kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  font-weight:600;color:#8a6534;margin-bottom:10px;
}
/* 主标题收小一档（大师兄：「这个字体可以适当小一点」）*/
.scene .hero-h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(19px,1.9vw,26px);line-height:1.3;
  letter-spacing:.03em;text-wrap:balance;
}

/* ---- ② 分类块：主图下沿 → 跑马栏之上 --------------------------------
   这是一条独立的信息带。图上不再有任何字，这条带子就是主图的「图注」：
   四条板块说明跟着四张图一起轮换，同时承担板块入口。
   带子的下边界不用自己画 —— .trust 自带 border-top:1px solid var(--line)，
   上边界就是图片的下边缘，所以这条带子两端都是「看得见的分界」。
   包一层 .wrap：让左缘与页面其它各栏对齐，不会因为跳出 .scene 就跑到视口边。 */
.hero-cats{
  position:relative;background:var(--paper);
  padding:clamp(24px,3.2vw,38px) 0 clamp(22px,2.8vw,32px);
}

/* 轮播文案：四条叠在同一格里，容器高度自动取最高的那条，切换时互不挤压
   （grid-area:1/1 叠放；高度 = 四条里最高的那条，切换时页面不跳） */
.hero-cats .hero-rotator{
  display:grid;
}
.hero-copy{
  grid-area:1/1;align-self:start;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .78s var(--ease),visibility .6s;
}
.hero-copy.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.3s}

/* 板块名 + 板块标题整块可点 → 进该板块的商品页。
   大师兄：「点板块的名称就可以直接进入到相应板块的购买界面」 */
.hero-link{display:block;color:inherit;text-decoration:none}
.hero-link:hover .hero-title,.hero-link:focus-visible .hero-title{color:var(--brass)}

/* eyebrow / title / line 三兄弟：两块共用，所以用并列选择器写一次。
   两段式前缀是为了压过 dynamic-css 的 `body .hero-xxx`（0,1,1）。 */
.scene .hero-eyebrow,.hero-cats .hero-eyebrow{
  display:block;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#8a6534;font-weight:600;
}
.scene .hero-title,.hero-cats .hero-title{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(19px,2.05vw,30px);line-height:1.2;letter-spacing:.03em;
  margin-top:9px;transition:color .3s;
}
/* 描述最多三行（大师兄：「以及下边的文字。三行就好」）。
   -webkit-line-clamp 需要 -webkit-box；超出直接裁掉。
   行数从 3 改成 N 就改这一处的数字。 */
.scene .hero-line,.hero-cats .hero-line{
  margin-top:12px;font-size:13.5px;line-height:1.74;color:#332e28;max-width:600px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* 进度横条与「Shop …」按钮：已从 HTML 移除。这里留一条兜底，
   万一某个页面用的还是旧缓存 HTML，也不会把进度条露出来。
   注意：**不要**在这里把 .hero-rotator 也 display:none 掉 ——
   旧 HTML 里它还在 .scene 内，藏掉就等于把四条分类文案整段吃掉；
   留着它至少还能读。 */
.hero-nav,.hero-cta{display:none}

/* 首屏淡入：两块错开 150ms，读起来有先后（图 → 品牌块 → 分类块） */
.js .scene-viewport,.js .hero-text{opacity:0}
.js.ready .scene-viewport{opacity:1;transition:opacity 1s ease .05s}
.js.ready .hero-text{opacity:1;transition:opacity 1s ease .3s}
.js .hero-cats{opacity:0}
.js.ready .hero-cats{opacity:1;transition:opacity 1s ease .45s}

/* 窄屏：图区加高一档（同宽下比 1536:930 更高，看图更舒服），
   品牌块与分类块的字号各收一档。
   注意品牌块现在也压在图上，所以图必须留够高度，
   否则它会盖掉大半个画面。 */
@media (max-width:760px){
  .scene{min-height:min(66vh,480px)}
  .scene .hero-text{padding:clamp(18px,4.6vw,24px) 0 0 32px}
  /* 手机上图被 object-fit:cover 裁得更窄，雾要再往右多铺一段才够衬底 */
  .scene .hero-text::before{width:calc(var(--jy-hpanel-w,40) * 1vw + var(--jy-hfog-x,54px) + 90px)}
  .scene .hero-kicker{font-size:10px;letter-spacing:.34em}
  .scene .hero-h1{font-size:clamp(18px,5vw,23px);max-width:80%}
  .hero-cats{padding:26px 0 24px}
  .scene .hero-title,.hero-cats .hero-title{font-size:clamp(18px,4.8vw,23px)}
  .scene .hero-line,.hero-cats .hero-line{font-size:13px;max-width:none}
}

/* =========================================================================
   4. 板块导览条
   ========================================================================= */

/* =========================================================================
   5. 横向轨道（封面区 / 商品栏 / 选品志通用）
   -------------------------------------------------------------------------
   一屏露几个由 --per 决定：全为整数（4→5→6 / 平板 3 / 手机 2），杜绝半张卡
   ========================================================================= */
.rail{position:relative}
.rail-track{
  --per:4;--gap:24px;
  display:flex;gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px 20px;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{
  flex:0 0 auto;
  width:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align:start;
}
@media (min-width:1500px){.rail-track{--per:5}}
@media (min-width:1800px){.rail-track{--per:6}}
@media (max-width:1179px){.rail-track{--per:3;--gap:18px}}
@media (max-width:899px){.rail-track{--per:2;--gap:16px}}
@media (max-width:600px){.rail-track{--per:2;--gap:14px}}

/* ---- 左右箭头（放在标题行右侧，任何尺寸都不压内容） ---- */
.sec-tools{display:flex;align-items:center;gap:18px;flex-shrink:0}
.rail-nav{display:flex;gap:8px}
.rail-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(253,252,250,.92);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--serif);font-size:20px;line-height:1;
  box-shadow:0 4px 14px rgba(64,52,34,.09);
  transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease),box-shadow .3s,opacity .3s;
}
.rail-btn > span{display:block;transform:translateY(-1px)}
.rail-btn:hover:not(:disabled){background:var(--brass);color:#fff;border-color:var(--brass);transform:translateY(-2px);box-shadow:0 10px 24px rgba(140,108,64,.26)}
.rail-btn:disabled{opacity:.28;cursor:default;box-shadow:none}
@media (max-width:620px){
  .rail-btn{width:34px;height:34px;font-size:17px}
  .sec-tools{gap:12px}
  .rail-nav{gap:6px}
}

/* =========================================================================
   6. 版块封面 —— 横向轨道，大标签 + 家居图底
   ========================================================================= */
.covers{position:relative;padding:96px 0 0}
/* 选品志与"Corners"回顾栏都是透底容器，之间不留缝，避免大片空海 */
#journal{margin-bottom:0}
.covers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.covers-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.4vw,38px);line-height:1.15;letter-spacing:.02em}
.covers-head .sub{display:block;margin-top:9px;font-family:var(--sans);font-size:13px;letter-spacing:.05em;color:var(--muted);max-width:560px}
.covers .rail-track{padding-bottom:26px}

.cover{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;border-radius:13px;
  background:var(--paper-2);
  box-shadow:0 16px 40px rgba(64,52,34,.13);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.cover:hover{box-shadow:0 30px 66px rgba(64,52,34,.21);transform:translateY(-5px)}
/* 图底：整幅房间实景，滚动时按景深轻微上浮（.cimg 由 JS 写 transform） */
.cover .cimg{
  position:absolute;inset:-5% -2%;z-index:0;display:block;
  transform:scale(1.075);
  will-change:transform;
}
.cover .cimg img{width:100%;height:100%;object-fit:cover;display:block}
/* 底部柔和压暗，保证大字标签在任何画面上都读得清 */
.cover::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(26,20,14,.78) 0%,rgba(26,20,14,.5) 28%,rgba(26,20,14,.15) 56%,rgba(26,20,14,0) 76%);
}
.cover .cmeta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:block;padding:20px 22px 18px;color:#fff;
  transition:transform .6s var(--ease);
}
.cover:hover .cmeta{transform:translateY(-5px)}
.cover .cno{
  display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:.34em;
  color:rgba(255,255,255,.9);margin-bottom:6px;
  text-shadow:0 1px 10px rgba(30,22,14,.5);
}
.cover .ct{
  position:relative;display:inline-block;
  font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.65vw,23px);
  line-height:1.1;letter-spacing:.03em;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.cover .ct::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.cover:hover .ct::after{transform:scaleX(1)}
.cover .cs{
  display:block;margin-top:10px;
  font-size:11.5px;line-height:1.5;letter-spacing:.02em;color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(30,22,14,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.cover:hover .cs{opacity:1;transform:none}
.cover .cc{
  display:block;margin-top:10px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(30,22,14,.55);
}
.cover .cc b,.cover .cc em{font-style:normal;font-weight:600;color:#fff}

@media (max-width:860px){
  .covers{padding:68px 0 0}
  .covers-head{flex-direction:column;align-items:flex-start;gap:14px}
  .covers-head h2{font-size:clamp(24px,6vw,30px)}
  .cover .cmeta{padding:16px 16px 14px}
  .cover .cs{margin-top:8px;font-size:11px}
}
@media (max-width:700px){.cover .cs{display:none}}

/* =========================================================================
   7. 内容带：信任条 / 介绍带 / 四卖点
   ========================================================================= */
/* ---- 信任条跑马灯（原页 .trust-marquee 搬回） ---- */
.trust{
  position:relative;overflow:hidden;padding:16px 0;
  background:rgba(253,252,250,.56);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.trust-track{display:flex;width:max-content;animation:trustRun 46s linear infinite}
.trust:hover .trust-track{animation-play-state:paused}
.trust-group{display:flex;align-items:center}
.trust-badge{
  display:inline-flex;align-items:center;gap:9px;padding:0 30px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
}
.trust-badge svg{width:17px;height:17px;color:var(--brass);flex:none}
.trust-badge + .trust-badge{border-left:1px solid var(--line)}
/* 轨道里渲染了 3 组相同内容，走 1/3 宽度即无缝衔接。
   用 2 组时余量只有 3px（见 front-page.php 注释），会在循环某一刻露出空白。 */
@keyframes trustRun{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media (max-width:620px){.trust-badge{padding:0 20px;font-size:9.5px;letter-spacing:.12em}}

/* ---- 介绍带（原页 .intro 搬回） ---- */
.intro{
  padding:38px 0 32px;text-align:center;
  background:rgba(253,252,250,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:6px;margin-bottom:26px;
}
.intro .lead{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,3.1vw,33px);line-height:1.32;letter-spacing:.02em;margin-bottom:16px;
  text-shadow:0 1px 16px rgba(255,255,255,.9);
}
.intro .body{
  max-width:662px;margin:0 auto;font-size:14px;line-height:1.9;letter-spacing:.03em;color:var(--ink-2);
  text-shadow:0 1px 12px rgba(255,255,255,.9);
}

/* ---- 四卖点：一整条"腰线"，横在首屏下方分隔上下内容 ---- */
.features{padding:0}
.features .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;max-width:none;
  background:rgba(253,252,250,.95);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 44px;
}
.feat{display:flex;gap:12px;align-items:flex-start;padding:6px 26px;border-left:1px solid var(--line)}
.feat:first-child{border-left:none}
.feat svg{width:20px;height:20px;color:var(--brass);flex:none;margin-top:1px}
.feat b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em}
.feat span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:900px){
  .features .wrap{grid-template-columns:repeat(2,1fr);padding:16px 22px;row-gap:14px}
  .feat{padding:4px 16px}
  .feat:nth-child(odd){border-left:none}
}
@media (max-width:560px){.features .wrap{padding:14px 16px;row-gap:12px}}

/* =========================================================================
   8. 商品板块
   ========================================================================= */
.sec{
  position:relative;padding:40px 0 18px;margin-bottom:208px;
  /* 栏内近乎实心，栏与栏之间的缝隙才露出窗外的海 */
  background:rgba(253,252,250,.93);
  border-radius:4px;
}
.sec--tint{background:rgba(253,252,250,.93)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.4vw,40px);line-height:1.15;letter-spacing:.02em}
.sec-head .sub{display:block;margin-top:9px;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--ink-2);text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}
.sec-head .more{
  flex-shrink:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:3px;transition:color .25s;
}
.sec-head .more::after{bottom:0}
.sec-head .more:hover{color:var(--brass)}
@media (max-width:760px){
  .sec{padding:34px 0 15px;margin-bottom:144px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
  .sec-head h2{font-size:clamp(23px,6vw,30px)}
}

/* 商品轨道外的柔光晕：中心提亮、边缘自然淡出（没有硬边，不会像"贴上去的白板"） */
.rail--grid,.rail--journal{position:relative;padding:30px 30px 14px;margin:0 -30px}
.rail--grid::before,.rail--journal::before{
  /* 底边必须收在板块内：之前 -30px 会探出板块下沿 12px，在缝隙里显出一道半透明白边 */
  content:"";position:absolute;inset:-34px -34px 0;z-index:0;pointer-events:none;
  border-radius:26px;
  background:radial-gradient(118% 104% at 50% 48%,
    rgba(253,252,250,.68) 0%,
    rgba(253,252,250,.56) 52%,
    rgba(253,252,250,.22) 82%,
    rgba(253,252,250,0) 100%);
}
.rail--grid > *,.rail--journal > *{position:relative;z-index:1}
@media (max-width:760px){
  .rail--grid,.rail--journal{margin:0 -16px;padding:24px 16px 22px}
  .rail--grid::before,.rail--journal::before{inset:-20px -18px 0;border-radius:18px}
}

/* ---- 商品卡：图片缓推 + 名称下划线扫过 + 价格位移 ----
   注：卡片上不再浮出任何固定字样（旧版那处「View piece」已取消）。
   归档页的加购按钮由 WooCommerce 官方钩子输出，文字在后台「商品页」一节可改。 */
.pcard{position:relative;display:block;cursor:pointer}
.pcard .ph{
  position:relative;overflow:hidden;border-radius:9px;
  background:#fff;
  box-shadow:0 8px 26px rgba(64,52,34,.11),0 1px 3px rgba(64,52,34,.06);
  aspect-ratio:1/1;--mx:50%;--my:50%;
  transition:box-shadow .55s var(--ease),transform .55s var(--ease);
}
.stars{display:flex;gap:6px;align-items:baseline;margin-top:5px;padding-bottom:2px}
.stars .st{color:#c9a15f;font-size:11px;letter-spacing:.18em}
.stars .ct{color:var(--muted);font-size:10.5px;letter-spacing:.05em}
.sec--tint .pcard .ph{background:#fff;box-shadow:0 8px 28px rgba(64,52,34,.13),0 1px 3px rgba(64,52,34,.06)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .ph{
  box-shadow:0 22px 46px rgba(64,52,34,.16),0 0 0 1px rgba(173,138,92,.34);
  transform:translateY(-4px);
}
.pcard:hover .ph img{transform:scale(1.06)}
/* 第二张图（细节特写）：叠在主图上，悬停淡入 —— 上游主题的卡片「跳图」效果。
   商品没有第二张图时这段不产生任何影响（DOM 里就没有 .pc-alt）。 */
.pcard .ph img.pc-alt{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:none;
  transition:opacity .5s var(--ease),transform 1s var(--ease);
}
.pcard:hover .ph img.pc-alt{opacity:1;transform:scale(1.04)}
.pcard h3{
  position:relative;display:inline-block;
  font-family:var(--serif);font-size:17.5px;font-weight:500;margin:13px 0 2px;letter-spacing:.02em;
  line-height:1.3;
  text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9);
  transition:color .3s var(--ease);
}
.pcard h3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.pcard:hover h3{color:var(--brass)}
.pcard:hover h3::after{transform:scaleX(1)}
.pcard .pr{font-size:13px;color:var(--ink-2);letter-spacing:.05em;text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9);transition:color .3s,transform .45s var(--ease)}
.pcard:hover .pr{color:var(--ink);transform:translateX(2px)}
.pcard .pr b{color:var(--brass);font-weight:600}
@media (max-width:600px){
  .pcard h3{font-size:15px;margin-top:10px}
  .pcard .pr{font-size:12px}
}

/* 搜索结果跳转高亮 */
@keyframes pflash{0%{box-shadow:0 0 0 0 rgba(173,138,92,.55)}100%{box-shadow:0 0 0 22px rgba(173,138,92,0)}}
.pcard.flash .ph{animation:pflash 1.2s ease-out 2}

/* ---- 选品志 ---- */
.jcard{display:block}
.jcard .jimg{overflow:hidden;border-radius:9px;background:#f0ece4;aspect-ratio:16/10;transition:box-shadow .55s var(--ease)}
.jcard .jimg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.jcard:hover .jimg{box-shadow:0 22px 46px rgba(64,52,34,.16)}
.jcard:hover .jimg img{transform:scale(1.05)}
.jcard .jdate{margin-top:13px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.jcard h3{
  position:relative;display:inline-block;
  font-family:var(--serif);font-weight:500;font-size:19.5px;line-height:1.32;
  margin-top:6px;letter-spacing:.01em;transition:color .3s;
}
.jcard h3::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.jcard:hover h3{color:var(--brass)}
.jcard:hover h3::after{transform:scaleX(1)}

/* 首页选品志：三篇一行（沿用 .jcard，只补网格容器） */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media (max-width:900px){.jgrid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (max-width:600px){.jgrid{grid-template-columns:1fr;gap:28px}}

/* ---- 滚动渐显（逐张错峰） ---- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .rail-track > .reveal:nth-child(2){transition-delay:70ms}
.js .rail-track > .reveal:nth-child(3){transition-delay:140ms}
.js .rail-track > .reveal:nth-child(4){transition-delay:210ms}
.js .rail-track > .reveal:nth-child(5){transition-delay:280ms}
.js .rail-track > .reveal:nth-child(6){transition-delay:350ms}

/* =========================================================================
   9. 品牌故事（原页 jy-editorial + about 搬回，风格统一）
   ========================================================================= */
.story{position:relative;padding:0}
.story-inner{display:grid;grid-template-columns:1.04fr 1fr;gap:54px;align-items:center}
.story--rev .story-media{order:2}
.story-media{
  border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:var(--paper-2);
  box-shadow:0 26px 60px rgba(64,52,34,.15);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.story-media img{width:100%;height:100%;object-fit:cover}
.story:hover .story-media{transform:translateY(-4px);box-shadow:0 34px 74px rgba(64,52,34,.19)}
.story-copy .kicker{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.story-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,37px);line-height:1.2;letter-spacing:.02em}
.story-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.9vw,23px);line-height:1.38;color:var(--ink);margin-top:10px}
.story-copy p{margin-top:16px;font-size:14px;line-height:1.92;letter-spacing:.02em;color:var(--ink);font-weight:500}
.story-copy .btn-ghost{margin-top:24px}
@media (max-width:900px){
  .story{padding:0}
  .story-inner{grid-template-columns:1fr;gap:28px}
  .story--rev .story-media{order:0}
}

/* =========================================================================
   10. 结语
   ========================================================================= */
.finale{
  background:rgba(253,252,250,.76);color:var(--ink);
  text-align:center;padding:104px 32px;border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.finale h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,46px);letter-spacing:.04em;margin-bottom:13px}
.finale h2 em{font-style:normal;color:var(--brass)}
.finale-sub{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.finale-sub b{color:var(--brass);font-weight:600}
.finale-sub .dot{margin:0 4px;color:var(--brass-soft)}

/* =========================================================================
   11. 完整页脚（原页 .site-footer 内容全部搬回）
   ========================================================================= */
.bt-footer{
  background:rgba(253,252,250,.84);color:var(--ink-2);
  border-top:1px solid var(--line);
  padding:66px 0 0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ft-top{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.35fr;gap:38px}
.ft-brand .brand-txt{font-family:var(--serif);font-size:21px;letter-spacing:.3em;color:var(--ink);font-weight:500}
.ft-brand p{margin-top:16px;font-size:13px;line-height:1.85;color:var(--muted);max-width:34ch}
.ft-contact{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);transition:color .25s}
.ft-contact svg{color:var(--brass);flex:none}
.ft-contact:hover{color:var(--brass)}
.ft-col h4{
  font-family:var(--serif);font-weight:500;font-size:12.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);margin-bottom:16px;
}
.ft-col ul{display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--muted)}
.ft-col ul a{display:inline-block;transition:color .25s,transform .3s var(--ease)}
.ft-col ul a:hover{color:var(--brass);transform:translateX(3px)}
.ft-col.newsletter p{font-size:12.5px;line-height:1.8;color:var(--muted);margin-bottom:14px}
.ft-col.newsletter p b{color:var(--brass);font-weight:600}
/* 订阅表单：输入框与按钮**上下排列**（不再并排）。
   原因：并排时输入框只剩约 150px，长邮箱地址在输入时看不全自己打了什么。
   拆成上下两行后，输入框占满整列宽度，按钮也占满整列。 */
.nl-form{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.nl-form input{
  flex:0 0 auto;width:100%;padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:12.5px;color:var(--ink);outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.nl-form input::placeholder{color:var(--muted)}
.nl-form input:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(173,138,92,.14)}
.nl-form button{
  width:100%;padding:12px 22px;border-radius:999px;background:var(--brass);color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
}
.nl-form button:hover{background:var(--brass-2);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 26px rgba(140,108,64,.26)}
.nl-msg{margin-top:10px;font-size:11.5px;letter-spacing:.04em;color:var(--brass)}
/* 订阅区合规小字（留邮箱会建账号 + 自动登录，这件事得告诉顾客）。
   文案在「外观 → 自定义 → 第 13 节」的 nl_note 里，留空则不输出这个节点。 */
.nl-note{margin:9px 0 0;font-size:11px;line-height:1.6;letter-spacing:.03em;color:var(--muted);opacity:.9}
.nl-note a{color:var(--muted);text-decoration:underline}

/* 账户区的两个入口按钮（2026-09-21 第 9 轮）。
   大师兄：「在网站上，这里应该设置两个按钮，一个是注册按钮，一个是登录按钮。
   Email 输入框我认为没必要保留了。」原来那个留邮箱的表单已移除，
   换成 Register（实底金）+ Log in（描边金）两个按钮，与全站按钮同一套语言。 */
.nl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.nl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;padding:12px 22px;
  border:1px solid var(--brass);border-radius:3px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
.nl-btn-solid{background:var(--brass);color:#fff}
.nl-btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2);color:var(--ink)}
.nl-btn-ghost{background:transparent;color:var(--brass)}
.nl-btn-ghost:hover{background:var(--brass);border-color:var(--brass);color:#fff}

/* 注册表单里的「Yes, add me to your mailing list」勾选框 —— 隐藏。
   2026-09-21 第 9 轮：站上已经明确不做营销订阅（页脚那块订阅表单都撤了），
   但 MailPoet 插件仍会往 WooCommerce 注册表单里塞一个订阅勾选框。
   它默认是不勾的，所以不会误订阅；只是留在那里会让顾客以为注册就等于
   同意收营销信 —— 而这封信实际上根本不会发（MailPoet 没配发信）。
   与「不承诺做不到的事」同一条原则，直接隐藏掉。 */
.woocommerce-form-register p:has(input[name^="mailpoet"]),
.woocommerce-form-register .form-row:has(input[name^="mailpoet"]),
.woocommerce-form-register label.woocommerce-form__label:has(input[name^="mailpoet"]){
  display:none !important;
}
@media (max-width:620px){
  .nl-actions{gap:8px}
  .nl-btn{min-width:0;flex:1 1 auto;padding:12px 14px}
}
.socials{display:flex;gap:9px;margin-top:18px}
.socials a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2);
  transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease);
}
.socials a:hover{background:var(--brass);color:#fff;border-color:var(--brass);transform:translateY(-2px)}

/* 法务 / 自助入口：放在「加入列表」那一列的下方，单独一条细线隔开。
   内容（隐私政策、条款、物流追踪）在「外观 → 自定义 → 页脚」里改。 */
.ft-legal{
  display:flex;flex-wrap:wrap;gap:7px 18px;
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
}
.ft-legal a{font-size:11.5px;letter-spacing:.04em;color:var(--muted);transition:color .25s}
.ft-legal a:hover{color:var(--brass)}
.ft-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:52px;padding:22px 0;border-top:1px solid var(--line);
}
.pay-icons{display:flex;gap:7px;flex-wrap:wrap}
.pay-icons span{
  display:inline-flex;align-items:center;height:26px;padding:0 9px;
  border:1px solid var(--line);border-radius:5px;background:#fff;
  font-size:10px;font-weight:700;letter-spacing:.02em;
}
.ft-copy{font-size:11px;letter-spacing:.1em;color:var(--muted)}
@media (max-width:1000px){.ft-top{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:620px){
  .bt-footer{padding-top:48px}
  .ft-top{grid-template-columns:1fr;gap:30px}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:14px;margin-top:34px}
}

/* =========================================================================
   12. 购物车抽屉
   ========================================================================= */
.drawer-ov{
  position:fixed;inset:0;z-index:80;background:rgba(27,25,22,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.drawer-ov.show{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(402px,92vw);
  display:flex;flex-direction:column;
  background:rgba(253,252,250,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(64,52,34,.18);
  transform:translateX(102%);
  transition:transform .5s var(--ease);
}
.cart-drawer.show{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.cart-head h3{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.03em}
.cart-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .25s,color .25s,transform .35s var(--ease)}
.cart-close:hover{background:rgba(173,138,92,.14);color:var(--brass);transform:rotate(90deg)}
.cart-body{flex:1;overflow-y:auto;padding:6px 24px 20px}
.cart-item{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:62px;height:74px;object-fit:cover;border-radius:7px;background:#fff;box-shadow:0 4px 14px rgba(64,52,34,.1)}
.cart-item .ci-name{font-family:var(--serif);font-size:15.5px;transition:color .25s}
.cart-item .ci-name:hover{color:var(--brass)}
.cart-item .ci-meta{margin-top:3px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cart-item .ci-side{text-align:right}
.cart-item .ci-rm{display:block;font-size:15px;line-height:1;color:var(--muted);margin-bottom:5px;transition:color .25s}
.cart-item .ci-rm:hover{color:var(--brass)}
.cart-item .ci-sub{font-size:12.5px;color:var(--brass);font-weight:600}
.cart-foot{padding:18px 24px 22px;border-top:1px solid var(--line)}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cart-total strong{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--brass);letter-spacing:.02em}
/* 抽屉底部两个按钮：统一成整宽、上下堆叠、间距一致。
   原来 Checkout 是按内容撑开的内联块、View cart 又是另一种宽度，
   两个挤在一行里左右不齐 —— 大师兄反馈「排版是乱的」。
   配色由 .btn-gold / .btn-ghost 统一（主题色底、悬停变浅）。 */
.cart-foot .btn-gold,
.cart-foot .btn-ghost{
  display:block;width:100%;text-align:center;
  padding:14px 20px;border-radius:999px;
}
.cart-foot .btn-gold{margin-bottom:10px}
.cart-empty{padding:40px 4px;text-align:center;font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* =========================================================================
   13. 悬浮按钮：回到场景 / 回到顶部
   ========================================================================= */
.back-scene{
  position:fixed;right:22px;bottom:22px;z-index:40;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;
  background:rgba(253,252,250,.94);color:var(--ink);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(64,52,34,.12);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .35s,transform .35s var(--ease),background .3s,color .3s;
}
.back-scene.show{opacity:1;pointer-events:auto;transform:none}
.back-scene:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}

.to-top{
  /* 2026-09-21：从「左下角 42px」改为「右下角 56px」，照参考站的
     .jp-back-to-top 规格（圆形、米白底、金色图标）。大师兄的要求：
     「统一 TalkTo 在左下角，向上返回顶部按钮在右下角」。
     左下角让给 Tawk.to 客服气泡，两个按钮不再叠在一起。 */
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(253,252,250,.96);color:var(--brass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(64,52,34,.14);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .35s,transform .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--brass);color:#fff;border-color:var(--brass);transform:translateY(-2px)}
/* 手机端只调边距；尺寸/配色统一由 inner.css 的 .to-top 控制（后加载，会覆盖这里） */
@media (max-width:620px){.to-top{right:14px;bottom:14px}}

/* =========================================================================
   14. 无障碍 / 降低动态
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bg-blobs,.bg-lines,.trust-track{animation:none}
  .bg-sea{animation:none}
  .sea-shimmer{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .cover,.cover:hover{transform:none}
  .cover .cimg{transform:scale(1.02)!important}
  .rail-track{scroll-behavior:auto}
}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

/* =========================================================================
   15. 飘逸字体：英文标题用 Cormorant 斜体，中文保持正体（html[lang] 区分）
   ========================================================================= */
html[lang="en"] .scene-copy h1,
html[lang="en"] .sec-head h2,
html[lang="en"] .covers-head h2,
html[lang="en"] .story h2{
  font-family:"Fraunces",var(--serif);
  font-style:italic;font-weight:450;letter-spacing:.01em;
}
html[lang="en"] .scene-copy .kicker{letter-spacing:.4em}

/* =========================================================================
   16. 页眉 About 下拉 · 背景视频状态
   ========================================================================= */
.nav-drop{position:relative}
/* About 后面不再挂三角/箭头指示符（统一去掉）——只在鼠标移上去时播放展开动画 */
.drop-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  min-width:176px;padding:8px;z-index:70;
  background:rgba(253,252,250,.97);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(64,52,34,.16);
  opacity:0;pointer-events:none;
  transition:opacity .28s,transform .28s var(--ease);
}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.drop-menu a{display:block;padding:9px 14px;border-radius:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  opacity:0;transform:translateY(7px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .22s,color .22s}
.nav-drop:hover .drop-menu a,.nav-drop:focus-within .drop-menu a{opacity:1;transform:translateY(0)}
.drop-menu a:nth-child(2){transition-delay:.05s}
.drop-menu a:nth-child(3){transition-delay:.1s}
.drop-menu a:nth-child(4){transition-delay:.15s}
.drop-menu a:hover{background:rgba(173,138,92,.12);color:var(--brass)}
/* 真海浪视频播放后，CSS 波光退为点缀 */
.bg-sea.has-video .sea-shimmer{opacity:.85}
.bg-sea.has-video .sea-shimmer.s2{opacity:.8}

/* =========================================================================
   17. 手机端背景视频 —— 关掉一切额外动效
   -------------------------------------------------------------------------
   2026-09-21 第 9 轮（大师兄）：
   「我用手机登录，主页视频背景感觉像在抖动，本身页面也好像在抖动，
    好像在重新加载，看起来有点晕。尤其后边的背景视频，我在上下翻动的时候，
    它偶尔会跳一下，不知道是什么原因，你能查一查吗？」
   -------------------------------------------------------------------------
   实测根因（@390 与 @430 两档都复现）：
     ① .bg-sea 自身挂着 seaDrift 36s 无限动画（scale 1 → 1.03 + translate），
        而它是个铺满视口的 position:fixed 层 —— 移动端地址栏收起/展开会改变
        视口高度，fixed 层的 inset:0 跟着重排，再叠上这个动画就一直在晃。
     ② .bg-video 的 transform 里带 translate3d(... var(--sy) * -.004px ...)，
        也就是**视频位移跟着滚动位置走**。--sy 由 JS 在 requestAnimationFrame
        里插值写回，而那个循环有「空闲几帧就停」的机制 —— 滚动一停一走之间
        位移是跳变的。实测滚动 0 → 600 时位移从 0 跳到 -2.64px，
        这正是「上下翻动时偶尔跳一下」。
     ③ .bg-sea 与里面的 video 都写着 will-change:transform，等于两个独立
        合成层各自在动，移动端 GPU 上更容易抖/撕裂。
   处理：手机端（≤900px）把 ①②③ 全部关掉 —— 动画停、位移去掉（只保留
   一点点固定放大保证铺满）、will-change 收回。视频本身照常播放，
   只是不再随滚动晃。桌面端不受影响。
   ========================================================================= */
@media (max-width:900px){
  .bg-sea{animation:none !important}
  .bg-sea img,
  .bg-sea video{
    transform:scale(1.04) !important;
    will-change:auto;
  }
  .sea-shimmer{animation:none}
}