/* JSAUX 亚马逊旗舰店 · 皮肤
   主张：一个站点而不是货架。颜色：品牌蓝 #4D6BFF（出血色块）、纸 / 墨、白。直角。
   主手法：出血——店铺首页窗口出血到视口右缘、品类页窗口出血到视口左缘，蓝色色块整宽出血。
   招牌动作：店铺首页 scrub（本页唯一的 sticky 场景，两条注释随进度点亮）+ 品类页分段切换交叉淡入。 */

html[data-skin="jsaux-amazon"]{
  --ja-blue:#4D6BFF;
  --ja-deep:#3550E6;
  --skin-accent:var(--ja-deep);
  --skin-ground:var(--ja-blue);
  --skin-ground-fg:#FFFFFF;
  --ja-hi:var(--ja-deep);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="jsaux-amazon"]{--skin-accent:#8C9EFF;--ja-hi:#8C9EFF}
}
:root[data-theme="dark"][data-skin="jsaux-amazon"]{--skin-accent:#8C9EFF;--ja-hi:#8C9EFF}

/* 三栏：蓝开场 → 纸白三栏 → 蓝舞台 会一蓝一白一蓝地闪，三栏改成深一档的品牌蓝（白字对比 6:1），三段连成一片蓝 */
html[data-skin="jsaux-amazon"] .facts{background:var(--ja-deep);color:#fff;--ink:#fff;--mute:rgba(255,255,255,.74);--ba:#fff}

/* ---------- 01 店铺首页 · scrub，窗口出血到右缘 ---------- */
.ja-home{--scrub-len:300vh;--win-w:min(44vw,700px);--win-h:min(calc(100svh - 56px - 3svh),calc(100svh - 150px));--scene-after:0px;overflow-x:clip;--tag-bg:#fff;--tag-fg:var(--ja-blue)}
.scn-m .ja-home{padding-block:0}
.scn-m .ja-home .scrub__stage{padding-bottom:0}
.ja-home .scrub__stage{align-items:stretch}
.ja-home .scrub__side{justify-content:space-between;padding-bottom:3svh}
.ja-home .scrub__win{width:calc(var(--win-w) + var(--page));margin-right:calc(var(--page) * -1);background:#fff;border-radius:0}
.ja-home .scrub__bar{background:color-mix(in srgb,var(--ja-blue) 18%,transparent)}
.ja-home .scrub__bar i{background:var(--ja-blue)}
.ja-home .scrub__notes{gap:20px}
.ja-home .scrub__notes li{font-size:13px}
.ja-home .scrub__notes li::before{background:#fff}
.ja-home .scrub__notes small{color:rgba(255,255,255,.72);font-size:12px}
.ja-claim{margin:0;display:flex;flex-direction:column;font-family:var(--cn);font-weight:800;font-size:clamp(40px,5.6vw,92px);line-height:1.08;letter-spacing:.01em}
.ja-claim span:last-child{opacity:.55}

/* ---------- 02 品类页 · 分段切换，窗口出血到左缘 ---------- */
.ja-tabs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"panels list" "panels spec";grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,72px);align-items:start}
.ja-tabs .tabs__list{grid-area:list;flex-direction:column;flex-wrap:nowrap;gap:0;margin:0;border-top:1px solid var(--ink)}
.ja-tabs .tabs__panels{grid-area:panels;margin-left:calc(var(--page) * -1)}
.ja-cat{max-height:calc(100svh - 150px)}
.ja-tabs .tabs__tab{display:flex;align-items:baseline;gap:14px;width:100%;min-height:0;padding:14px 0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--mute);font-family:"Archivo",var(--cn);font-weight:800;font-stretch:80%;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:0;text-align:left;transition:color .45s ease}
.ja-tabs .tabs__tab b{font-family:var(--mono);font-weight:400;font-size:11px;font-stretch:100%;letter-spacing:.1em;transform:translateY(-.5em)}
.ja-tabs .tabs__tab::after{content:"";margin-left:auto;align-self:center;width:10px;height:10px;background:var(--ja-blue);opacity:0;transform:scale(.4);transition:opacity .45s ease,transform .45s var(--out)}
.ja-tabs .tabs__tab:hover{background:none;color:var(--ink)}
.ja-tabs .tabs__tab[aria-selected="true"],.ja-tabs .tabs__tab[aria-selected="true"]:hover{background:none;color:var(--ja-hi)}
.ja-tabs .tabs__tab[aria-selected="true"]::after{opacity:1;transform:none}
.ja-tabs .tabs__tab:focus-visible{outline:2px solid var(--ja-hi);outline-offset:2px}
.ja-cat .pic__btn{background:#fff}
.ja-cats .tag{background:var(--ja-blue);color:#fff}
.scn .ja-tabs .tabs__panel{transition:opacity .6s ease,visibility 0s .6s}
.scn .ja-tabs .tabs__panel.is-on{transition:opacity .6s ease}

/* 版式拆解：四个区块是同一张线框，切换品类时它不动 */
.ja-spec{grid-area:spec;display:flex;flex-direction:column;gap:18px;padding-top:clamp(28px,3vw,48px)}
.ja-spec__k{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute)}
.ja-spec__list{list-style:none;margin:0;padding:18px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ja-spec__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.ja-spec__list li b{display:none}
.ja-spec__list li::before{content:"";display:block;height:10px;width:62%;background:var(--ink);opacity:.82}
.ja-spec__list li:nth-child(2)::before{height:6px;width:44%;opacity:.38}
.ja-spec__list li:nth-child(3)::before{height:clamp(56px,6vw,96px);width:100%;opacity:.12}
.ja-spec__list li:nth-child(4)::before{height:18px;width:72px;background:var(--ja-blue);opacity:1}
.ja-spec__list li span{color:var(--mute)}

/* ---------- 窄屏 ---------- */
@media (max-width: 899px){
  .ja-home{--scrub-len:260vh;--win-w:100%;--win-h:min(calc(100svh - 250px),640px)}
  .ja-home .scrub__win{width:calc(100% + var(--page) * 2);margin-inline:calc(var(--page) * -1)}
  .ja-home .scrub__side{padding-bottom:0}
  .ja-claim{display:none}
  .ja-home .scrub__notes{gap:6px 16px}

  .ja-tabs{grid-template-columns:minmax(0,1fr);grid-template-areas:"list" "panels" "spec";grid-template-rows:none}
  .ja-tabs .tabs__list{flex-direction:row;border-top:0;margin-bottom:16px;gap:0}
  .ja-tabs .tabs__tab{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0 10px;font-size:clamp(17px,5vw,22px);border-bottom-width:2px}
  .ja-tabs .tabs__tab b{transform:none}
  .ja-tabs .tabs__tab::after{display:none}
  .ja-tabs .tabs__tab[aria-selected="true"]{border-bottom-color:var(--ja-blue)}
  .ja-tabs .tabs__panels{margin-inline:calc(var(--page) * -1)}
  .ja-cat{--ar:1 / 1 !important}
  .ja-spec{padding-top:14px;gap:9px}
}

/* 版心像素值：site.css 的 --page 含 100%，在子元素的 margin/padding/width 里会按父盒宽度算，出血量会错；这里用 100vw 的版本 */