/* ============================================================

   STORE 02 — "PODLOCK"

   Direction: replacement-pod specialist / compatibility-first

   Inspired by: buypodsnow, puffmantra, elfbarjapan (pod SKUs)

   Design language: near-black, monospace data, spec tables,

                    device→pod finder, compatibility matrix

   ============================================================ */

:root{

  --bg:#0B0B0C; --panel:#131316; --panel-2:#17171B; --line:#26262B; --line-2:#33333A;

  --text:#E9E7E2; --dim:#8B8B93; --dim-2:#6A6A72;

  --accent:#FF4D00; --accent-soft:rgba(255,77,0,.12);

  --ok:#39D98A; --ok-soft:rgba(57,217,138,.12);

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

}

*{box-sizing:border-box}

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;

  line-height:1.55;-webkit-font-smoothing:antialiased;

  background-image:radial-gradient(circle at 20% -10%,rgba(255,77,0,.09),transparent 45%),

                   radial-gradient(circle at 90% 5%,rgba(57,217,138,.05),transparent 40%);}

a{color:inherit;text-decoration:none}

button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}



/* ---------- top strip ---------- */

.strip{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;

  letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2)}

.strip .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:20px}

.strip .live{display:flex;align-items:center;gap:7px;color:var(--ok)}

.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(57,217,138,.6);

  animation:pulse 2s infinite}

@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}



/* ---------- header ---------- */

header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.92);backdrop-filter:blur(14px);

  border-bottom:1px solid var(--line)}

.head{display:flex;align-items:center;gap:32px;height:70px}

.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:.16em}

.logo-mark{width:30px;height:30px;border:1.5px solid var(--accent);border-radius:7px;display:grid;

  place-items:center;position:relative}

.logo-mark::before{content:"";width:9px;height:14px;border-radius:3px 3px 1px 1px;background:var(--accent)}

.logo-mark::after{content:"";position:absolute;right:-5px;top:50%;width:5px;height:1.5px;background:var(--accent)}

nav.main{display:flex;gap:4px;flex:1}

nav.main a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;

  padding:9px 13px;border-radius:5px;color:var(--dim);transition:.15s}

nav.main a:hover{color:var(--text);background:var(--panel)}

nav.main a.active{color:var(--accent);background:var(--accent-soft)}

.head-acts{display:flex;align-items:center;gap:10px}

.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:7px;display:grid;

  place-items:center;transition:.15s}

.icon-btn:hover{border-color:var(--line-2);background:var(--panel)}

.icon-btn svg{stroke:var(--text);fill:none;stroke-width:1.6}

.bag{display:flex;align-items:center;gap:9px;border:1px solid var(--accent);border-radius:7px;

  height:38px;padding:0 13px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent)}

.bag:hover{background:var(--accent);color:#0B0B0C}

.bag b{font-weight:700}



/* ---------- hero ---------- */

.hero{padding:56px 0 20px;border-bottom:1px solid var(--line)}

.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start}

.hero h1{margin:0;font-size:clamp(36px,4.6vw,62px);line-height:.98;letter-spacing:-.04em;font-weight:700}

.hero h1 span{display:block;color:var(--dim-2)}

.hero h1 em{font-style:normal;color:var(--accent)}

.hero-sub{margin:22px 0 0;max-width:44ch;color:var(--dim);font-size:15.5px}

.hero-stats{display:flex;gap:36px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}

.hero-stats div b{display:block;font-family:var(--mono);font-size:22px;letter-spacing:-.02em;color:var(--text)}

.hero-stats div span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)}



/* finder card */

.finder{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}

.finder-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;

  justify-content:space-between}

.finder-head h2{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.finder-body{padding:18px}

.step{margin-bottom:18px}

.step:last-child{margin-bottom:0}

.step-label{display:flex;align-items:center;gap:9px;margin-bottom:9px}

.step-num{width:19px;height:19px;border-radius:4px;border:1px solid var(--line-2);display:grid;

  place-items:center;font-family:var(--mono);font-size:9.5px;color:var(--dim)}

.step-label span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

select{width:100%;height:44px;background:var(--bg);border:1px solid var(--line-2);border-radius:7px;

  color:var(--text);font-family:var(--mono);font-size:12.5px;padding:0 12px;outline:none;cursor:pointer;

  appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238B8B93' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");

  background-repeat:no-repeat;background-position:right 12px center}

select:focus{border-color:var(--accent)}

.finder-result{border-top:1px solid var(--line);padding:16px 18px;background:var(--panel-2);min-height:96px}

.fr-empty{font-family:var(--mono);font-size:11px;color:var(--dim-2);letter-spacing:.04em;line-height:1.7}

.fr-hit{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}

.fr-hit:last-child{border-bottom:0}

.fr-code{font-family:var(--mono);font-size:11px;color:var(--accent);min-width:74px}

.fr-name{font-size:13px;flex:1;line-height:1.3}

.fr-price{font-family:var(--mono);font-size:12.5px}



/* quick lookup */

.fsearch{width:100%;height:40px;background:var(--panel-2);border:1px solid var(--line-2);

  border-radius:4px;padding:0 12px;font:500 12.5px var(--mono);color:var(--text);outline:none;transition:.15s}

.fsearch::placeholder{color:var(--dim-2);font-family:var(--sans);font-size:12.5px}

.fsearch:focus{border-color:var(--accent);background:var(--panel)}

.fr-hit.fr-btn{width:100%;text-align:left;background:none;border:0;border-bottom:1px dashed var(--line);

  font:inherit;color:inherit;cursor:pointer;padding:9px 0;display:flex;align-items:center;gap:12px}

.fr-hit.fr-btn:hover{background:var(--panel-2)}

.fr-hit.fr-btn:last-child{border-bottom:0}

.fr-name em{display:block;font-style:normal;font-size:10.5px;color:var(--dim-2);margin-top:3px;

  font-family:var(--mono);letter-spacing:.03em}



/* ---------- matrix ---------- */

.matrix-sec{padding:64px 0}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;

  padding-bottom:16px;border-bottom:1px solid var(--line)}

.sec-head h2{margin:0;font-size:26px;letter-spacing:-.03em;font-weight:600}

.sec-head p{margin:7px 0 0;color:var(--dim);font-size:13.5px;max-width:56ch}

.legend{display:flex;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle}

.legend .y{background:var(--ok)}

.legend .n{background:var(--line-2)}



.matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}

table.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:820px;font-size:12.5px}

table.matrix th,table.matrix td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line);

  border-right:1px solid var(--line);white-space:nowrap}

table.matrix th:last-child,table.matrix td:last-child{border-right:0}

table.matrix thead th{background:var(--panel-2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;

  text-transform:uppercase;color:var(--dim);font-weight:500;position:sticky;top:0;z-index:2}

table.matrix thead th.dev{writing-mode:vertical-rl;transform:rotate(180deg);height:118px;padding:12px 8px;

  text-align:left;vertical-align:bottom;letter-spacing:.08em}

table.matrix tbody th{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1;

  border-right:1px solid var(--line-2);min-width:230px}

table.matrix tbody tr:hover th,table.matrix tbody tr:hover td{background:#1B1B20}

.m-code{display:block;font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.06em;margin-bottom:3px}

.m-name{display:block;font-size:12.5px;color:var(--text);line-height:1.3;white-space:normal;max-width:220px}

.yes{color:var(--ok);font-size:15px}

.no{color:var(--line-2);font-size:15px}

td.hl{background:rgba(255,77,0,.07)!important}

.matrix-note{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:var(--mono);font-size:10.5px;

  letter-spacing:.04em;color:var(--dim-2)}



/* ---------- product grid ---------- */

.pods{padding:0 0 72px}

.pod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.pcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;

  transition:.18s;display:flex;flex-direction:column}

.pcard:hover{border-color:var(--line-2);transform:translateY(-2px);

  box-shadow:0 20px 40px -30px rgba(0,0,0,.9)}

.pcard-top{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--line)}

.pcard-visual{width:74px;height:88px;flex:none;border-radius:8px;background:var(--bg);

  border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}

.pcard-visual::after{content:"";position:absolute;inset:0;

  background:linear-gradient(180deg,transparent 55%,rgba(255,77,0,.1))}

.shape{position:relative}

.shape.pod{width:26px;height:44px;border-radius:6px 6px 3px 3px;

  background:linear-gradient(180deg,#E6E8EA,#B9BEC4);box-shadow:0 8px 16px -8px rgba(0,0,0,.8)}

.shape.pod::before{content:"";position:absolute;top:5px;left:4px;right:4px;height:11px;border-radius:3px;

  background:linear-gradient(180deg,hsl(var(--h) 72% 58%),hsl(var(--h) 80% 42%))}

.shape.pod::after{content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);

  width:9px;height:3px;border-radius:2px;background:#8B9099}

.pcard-head{flex:1;min-width:0}

.pcard-code{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--accent);margin-bottom:5px}

.pcard-name{font-size:14px;font-weight:600;line-height:1.32;margin:0 0 8px;letter-spacing:-.01em}

.pcard-price{font-family:var(--mono);font-size:16px;letter-spacing:-.02em}

.pcard-specs{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}

.spec{padding:9px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

.spec:nth-child(2n){border-right:0}

.spec:nth-last-child(-n+2){border-bottom:0}

.spec span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;

  color:var(--dim-2);margin-bottom:2px}

.spec b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text)}

.fits{padding:11px 14px;font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.6;

  border-bottom:1px solid var(--line);flex:1}

.fits b{color:var(--ok);font-weight:500}

.pcard-foot{padding:12px 14px}

.buy{width:100%;height:38px;border-radius:6px;background:var(--accent);color:#0B0B0C;

  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;

  transition:.15s}

.buy:hover{background:#FF6A29}

.buy.done{background:var(--ok)}



/* ---------- verify ---------- */

.verify{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;

  background:linear-gradient(180deg,rgba(255,77,0,.04),transparent)}

.verify-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);

  border:1px solid var(--line);border-radius:10px;overflow:hidden}

.vstep{background:var(--bg);padding:26px}

.vstep b{display:block;font-family:var(--mono);font-size:34px;color:var(--line-2);letter-spacing:-.03em;margin-bottom:14px}

.vstep h3{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}

.vstep p{margin:0;font-size:13px;color:var(--dim);line-height:1.65}



/* ---------- device index ---------- */

.index{padding:56px 0}

.idx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 28px}

.idx-letter{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);

  padding:16px 0 6px;border-bottom:1px solid var(--line)}

.idx-item{font-size:13px;color:var(--dim);padding:5px 0;display:flex;justify-content:space-between;gap:10px}

.idx-item:hover{color:var(--text)}

.idx-item em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim-2)}



/* ---------- footer ---------- */

footer{border-top:1px solid var(--line);padding:40px 0 0;font-size:13px;color:var(--dim)}

.foot{display:flex;justify-content:space-between;gap:32px;padding-bottom:32px;flex-wrap:wrap}

.foot p{margin:14px 0 0;max-width:38ch;font-size:12.5px;line-height:1.7;color:var(--dim-2)}

.foot-links{display:flex;gap:44px;flex-wrap:wrap}

.foot-links h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;

  color:var(--dim);margin:0 0 12px}

.foot-links ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:12.5px}

.foot-links a:hover{color:var(--text)}

.foot-bar{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;

  gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.08em;

  text-transform:uppercase;color:var(--dim-2)}

.age{border:1px solid var(--line-2);border-radius:4px;padding:4px 8px;color:var(--accent);border-color:var(--accent)}



/* ---------- responsive ---------- */

@media(max-width:1080px){

  .hero-grid{grid-template-columns:1fr;gap:36px}

  .pod-grid{grid-template-columns:repeat(2,1fr)}

  .idx-grid{grid-template-columns:repeat(3,1fr)}

  nav.main{display:none}

}

@media(max-width:720px){

  .wrap{padding:0 16px}

  .strip .wrap{height:auto;padding:9px 0;justify-content:flex-start;gap:0}

  .strip .wrap > span:not(.live){display:none}

  .strip .live{letter-spacing:.06em}

  .pod-grid{grid-template-columns:1fr}

  .verify-grid{grid-template-columns:1fr}

  .idx-grid{grid-template-columns:repeat(2,1fr)}

  .hero-stats{gap:22px}

  .sec-head{flex-direction:column;align-items:flex-start}

}

/* ============================================================

   POLISH — a11y + terminal-style age gate

   ============================================================ */

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip{position:fixed;left:16px;top:-64px;z-index:400;background:var(--text);color:var(--bg);

  padding:10px 16px;border-radius:4px;font:700 12px var(--sans);transition:top .2s}

.skip:focus{top:14px}



.ag{position:fixed;inset:0;z-index:300;background:rgba(5,5,6,.92);backdrop-filter:blur(7px);

  display:grid;place-items:center;padding:20px;transition:.25s}

.ag.off{opacity:0;visibility:hidden;pointer-events:none}

.ag-card{width:100%;max-width:486px;background:var(--panel);border:1px solid var(--line-2);

  border-radius:5px;padding:34px 32px 28px;position:relative;overflow:hidden}

.ag-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}

.ag-tag{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--accent);text-transform:uppercase;

  display:block;margin-bottom:18px}

.ag h2{margin:0 0 12px;font:600 25px/1.2 var(--sans);letter-spacing:-.025em;color:var(--text)}

.ag p{margin:0 0 22px;font:400 13.5px/1.7 var(--sans);color:var(--dim)}

.ag p b{color:var(--text);font-weight:600}

.ag-btns{display:grid;gap:9px}

.ag-yes{height:46px;width:100%;background:var(--accent);color:#fff;font:700 13px var(--sans);

  border-radius:3px;letter-spacing:.02em;transition:.15s}

.ag-yes:hover{filter:brightness(1.12)}

.ag-no{height:42px;width:100%;border:1px solid var(--line-2);color:var(--dim);font:600 12.5px var(--sans);

  border-radius:3px;transition:.15s}

.ag-no:hover{border-color:var(--dim);color:var(--text)}

.ag-deny{display:none;margin-top:14px;padding:10px 13px;border-left:2px solid #D64545;

  background:rgba(214,69,69,.1);color:#FF9B9B;font:600 12px/1.6 var(--sans)}

.ag-deny.on{display:block}

.ag-fine{margin:16px 0 0;font:400 10.5px/1.6 var(--mono);color:var(--dim-2);letter-spacing:.02em}

.ag-card:focus,.ag-card:focus-visible{outline:none}



/* ---------- bag popover ---------- */

.bagwrap{position:relative}

.bagpop{position:absolute;right:0;top:calc(100% + 10px);width:308px;background:var(--panel);

  border:1px solid var(--line-2);border-radius:6px;padding:14px;display:none;z-index:80;

  box-shadow:0 24px 50px -24px rgba(0,0,0,.85)}

.bagpop.on{display:block}

.bagpop h6{margin:0 0 10px;font:600 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;

  color:var(--dim-2)}

.bp-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line);

  font-size:12px;color:var(--text)}

.bp-row:last-of-type{border-bottom:0}

.bp-code{font:500 10.5px var(--mono);color:var(--accent);min-width:66px}

.bp-name{flex:1;line-height:1.35}

.bp-qty{font:500 11px var(--mono);color:var(--dim)}

.bp-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;

  padding-top:10px;border-top:1px solid var(--line-2);font:600 12px var(--sans)}

.bp-total b{font:700 14px var(--mono)}

.bp-empty{font:500 11px var(--mono);color:var(--dim-2);line-height:1.7;padding:6px 0}

.bp-go{margin-top:11px;width:100%;height:36px;background:var(--accent);color:#0B0B0C;

  font:700 11.5px var(--sans);border-radius:4px;letter-spacing:.06em;text-transform:uppercase}

.bp-go:hover{filter:brightness(1.1)}
/* ============ 真实产品目录（2026-11-02） ============ */
.pod-group + .pod-group{ margin-top:44px; }
.pg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:0 0 12px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.pg-lbl{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--accent); margin-bottom:6px; }
.pg-head h3{ margin:0; font-size:19px; letter-spacing:-.02em; font-weight:600; }
.pg-head p{ margin:6px 0 0; font-size:12.5px; color:var(--dim); max-width:62ch; line-height:1.6; }
.pg-count{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim-2); white-space:nowrap; }

/* 图片卡槽：保留原色块的边框与圆角，改成能装照片 */
.pcard-visual.has-photo{ width:88px; height:108px; background:#f2f2ef; padding:6px; }
.pcard-visual.has-photo::after{ display:none; }
.pcard-visual.has-photo.bg-dark{ background:#0b0c0e; }
.pcard-visual.has-photo img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard-visual.has-photo img{ transform:scale(1.06); }

.pcard-badge{ display:inline-block; margin-top:7px; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:3px; }
.pcard-badge.new{ background:rgba(255,77,0,.14); color:#FF6A29; }
.pcard-badge.hot{ background:rgba(64,192,120,.14); color:var(--ok); }

.spec b{ overflow-wrap:anywhere; line-height:1.35; }
/* 真实产品的规格字段数常常是奇数（3 个），最后单独一格的悬空会像个空盒子，让它整行铺满 */
.pcard-specs > .spec:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0; }

/* 矩阵分块 */
.mat-block + .mat-block{ margin-top:30px; }
.mat-label{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; }
.mat-label h3{ margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.mat-label .mono{ font-size:10px; letter-spacing:.12em; color:var(--accent); }
table.matrix td{ color:var(--dim); font-family:var(--mono); font-size:11.5px; }
table.matrix tbody tr:hover td{ color:var(--text); }