/* ============================================================
   cards.css — 补齐 components.css 缺失的组件 v1.0
   线上 components.css 是早期版本，缺少：
     · .filter-search（搜索框）
     · .article-card（游记 / 内容卡）
     · .product-card（文创商品卡）
   本文件只补这三块，其余一律不动。
   ============================================================ */

/* ── 搜索框 ───────────────────────────────────────────────── */
.filter-search{display:flex;align-items:center;gap:10px;flex:1;min-width:180px}
.filter-search input[type="text"],.filter-search input[type="search"]{flex:1;min-width:0;
  background:transparent;border:0;-webkit-appearance:none;appearance:none;border-radius:0;
  border-bottom:1px solid var(--line);padding:8px 0;font-size:15px;color:var(--text);outline:none;
  transition:border-color var(--dur) var(--ease)}
.filter-search input[type="text"]::placeholder,
.filter-search input[type="search"]::placeholder{color:var(--text-mute)}
.filter-search input[type="text"]:focus,
.filter-search input[type="search"]:focus{border-bottom-color:var(--metal);outline:none}
.filter-search input[type="search"]::-webkit-search-decoration,
.filter-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.filter-search button{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--text-mute);text-transform:uppercase;white-space:nowrap;padding:6px 0;
  background:transparent;border:0;cursor:pointer}
.filter-search button:hover{color:var(--metal-bright)}

/* 兜底：任何未被覆盖的原生输入框都不再是白底 */
input[type="text"],input[type="search"],input[type="email"],input[type="password"],textarea{
  background-color:transparent;
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  caret-color:var(--metal);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg-1) inset;
  transition:background-color 9999s ease-out;
}

/* ── 游记 / 内容卡 ────────────────────────────────────────── */
.article-card{border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
  background:var(--card-bg);box-shadow:var(--card-shadow)}
.article-card:hover{border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:var(--card-shadow-hover)}
.article-card .thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--bg-2)}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transition:filter .5s var(--ease),transform .8s var(--ease)}
.article-card:hover .thumb img{filter:var(--img-hover);transform:scale(1.02)}
.article-card .cat{position:absolute;left:12px;bottom:12px;z-index:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-dim);
  background:var(--glass);border:1px solid var(--line-strong);padding:3px 8px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.article-card .body{padding:18px;display:flex;flex-direction:column;flex:1}
.article-card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-mute)}
.article-card h3{margin-top:10px;font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.02em}
.article-card h3 a{color:var(--metal-bright);transition:color .2s}
.article-card h3 a:hover{color:var(--accent)}
.article-card .desc{margin-top:10px;font-size:13.5px;line-height:1.75;color:var(--text-mute);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;color:var(--text-mute);letter-spacing:.06em}

/* ── 文创商品卡 ───────────────────────────────────────────── */
.product-card{border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
  background:var(--card-bg);box-shadow:var(--card-shadow)}
.product-card:hover{border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:var(--card-shadow-hover)}
.product-card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;
  filter:var(--img-filter);transition:filter .5s var(--ease)}
.product-card:hover .thumb img{filter:var(--img-hover)}
.product-card .cat{position:absolute;left:12px;bottom:12px;z-index:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-dim);
  background:var(--glass);border:1px solid var(--line-strong);padding:3px 8px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.product-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.product-card h3{font-size:15px;font-weight:500;letter-spacing:.03em;color:var(--metal-bright)}
.product-card .desc{margin-top:9px;font-size:13.5px;line-height:1.7;color:var(--text-mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .price{margin-top:auto;padding-top:16px;display:flex;align-items:baseline;gap:3px;
  font-family:var(--mono);color:var(--metal)}
.product-card .price i{font-style:normal;font-size:12px}
.product-card .price b{font-size:19px;font-weight:400;font-variant-numeric:tabular-nums}
.product-card .more{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--text-mute);
  text-transform:uppercase;text-align:left;width:100%;background:transparent;border-left:0;
  border-right:0;border-bottom:0;cursor:pointer}
.product-card .more:hover{color:var(--metal-bright)}

/* ── 空状态（两个页面共用） ───────────────────────────────── */
.empty-state{padding:var(--sp-7) var(--sp-4);text-align:center;border:1px solid var(--line)}
.empty-state h3{font-size:var(--fs-h3);font-weight:400;color:var(--text-dim)}
.empty-state p{margin-top:10px;font-size:var(--fs-sm);color:var(--text-mute)}

/* ── 热门排行 ─────────────────────────────────────────────── */
.rank{margin-top:var(--sp-7);border-top:1px solid var(--line);padding-top:var(--sp-5)}
.rank h2{font-size:var(--fs-h3);font-weight:400;color:var(--text-dim);letter-spacing:.04em}
.rank ol{margin-top:var(--sp-3);padding-left:0;list-style:none;counter-reset:rk}
.rank li{counter-increment:rk;padding:11px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px}
.rank li::before{content:counter(rk,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;color:var(--metal);flex:none}
.rank li a{font-size:13.5px;color:var(--text-dim);transition:color .2s}
.rank li a:hover{color:var(--metal-bright)}