:root {
      --ink: #1d1c1a;
      --muted: #6e6a65;
      --soft: #a5a09a;
      --line: #dedbd6;
      --line-strong: #c8c3bc;
      --paper: #ffffff;
      --canvas: #f6f5f2;
      --panel: #efeeeb;
      --dark: #1d1c1a;
      --orange: #ef5b2a;
      --orange-soft: #fff0e9;
      --orange-line: #f6c4b2;
      --green: #19744b;
      --green-soft: #e8f5ee;
      --blue: #0c5a9f;
      --shadow: 0 18px 55px rgba(41, 35, 28, .08);
      --shadow-soft: 0 8px 24px rgba(41, 35, 28, .06);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #ffffff;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, select { font: inherit; }
    button { color: inherit; }
    .material-symbols-rounded {
      font-size: 20px;
      line-height: 1;
      vertical-align: middle;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      height: 72px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(222, 219, 214, .9);
      background: rgba(246, 245, 242, .94);
      backdrop-filter: blur(18px);
    }
    .topbar-inner {
      width: min(1480px, calc(100% - 48px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand-home {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      text-decoration: none;
    }
    .fabulk-logo {
      width: auto;
      height: 30px;
      max-width: 160px;
      display: block;
      object-fit: contain;
    }
    .top-actions { display: flex; align-items: center; gap: 10px; }
    .icon-button {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: .2s ease;
    }
    .icon-button:hover { border-color: var(--ink); transform: translateY(-1px); }
    .cart-button {
      color: var(--ink);
      text-decoration: none;
    }
    .cart-button:hover { color: var(--blue); border-color: var(--blue); }

    
.topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      height: 72px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(222, 219, 214, .9);
      background: rgba(246, 245, 242, .94);
      backdrop-filter: blur(18px);
    }
.topbar-inner {
      width: min(1480px, calc(100% - 48px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
.brand-home {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      text-decoration: none;
    }
.fabulk-logo {
      width: auto;
      height: 30px;
      max-width: 160px;
      display: block;
      object-fit: contain;
    }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: .2s ease;
    }
.shell {
      width: min(1480px, calc(100% - 48px));
      margin: 0 auto;
      padding: 34px 0 72px; background: #ffffff; }
@media(max-width:760px){.shell{width:min(1480px,calc(100% - 10px))}}

.eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--orange);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
.hero {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
      margin: 22px 0 28px;
    }

.hero-copy { max-width: 750px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.trend-card {
      flex: 0 0 auto;
      min-width: 250px;
      padding: 18px 20px;
      border: 1px solid var(--orange-line);
      border-radius: 22px;
      background: var(--orange-soft);
    }
.ranking-context {
      margin-bottom: 16px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--paper);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      box-shadow: 0 4px 16px rgba(41, 35, 28, .03);
    }
.current-ranking { min-width: 0; display: flex; align-items: center; gap: 12px; }
.current-ranking-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.current-ranking-name { margin-top: 3px; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.current-ranking-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--ink);
    }
.browse-rankings {
      height: 40px;
      padding: 0 15px;
      border: 1px solid var(--line-strong);
      border-radius: 20px;
      background: var(--paper);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }
.ranking-explorer {
      position: fixed;
      inset: 0;
      z-index: 100;
      padding: 32px;
      background: rgba(29, 28, 26, .48);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
    }
    .ranking-explorer.open { display: flex; }
    .ranking-dialog {
      width: min(1120px, 100%);
      height: min(760px, calc(100vh - 64px));
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--canvas);
      box-shadow: 0 28px 80px rgba(0,0,0,.24);
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }
    .explorer-header {
      padding: 20px 22px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .explorer-title { font-size: 20px; font-weight: 850; letter-spacing: -.03em; }
    .explorer-subtitle { margin-top: 4px; color: var(--muted); font-size: 11px; }
    .close-explorer {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      cursor: pointer;
      display: grid;
      place-items: center;
    }
    .explorer-search {
      margin: 0 22px 18px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .explorer-search > .material-symbols-rounded {
      position: absolute;
      left: 16px;
      color: var(--soft);
      pointer-events: none;
    }
    .ranking-search-input {
      flex: 1;
      height: 46px;
      padding: 0 16px 0 45px;
      border: 1px solid var(--line);
      border-radius: 23px;
      outline: none;
      background: var(--paper);
    }
    .ranking-search-input:focus { border-color: var(--ink); }
    .ranking-node-count { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
    .ranking-filter-panel {
      margin: 0 22px 18px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--panel);
    }
    .ranking-filter-head {
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .ranking-filter-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
    }
    .ranking-filter-title .material-symbols-rounded { font-size: 18px; }
    .ranking-filter-hint { color: var(--muted); font-size: 9px; }
    .ranking-filter-reset {
      border: 0;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      font-size: 10px;
      font-weight: 750;
    }
    .ranking-filter-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .ranking-filter-field { position: relative; min-width: 0; }
    .ranking-filter-field label {
      display: block;
      margin: 0 0 6px 3px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .ranking-filter-button {
      width: 100%;
      height: 38px;
      padding: 0 12px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      color: var(--ink);
      background: var(--paper);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
    }
    .ranking-filter-button.active {
      border-color: var(--orange);
      color: #fff;
      background: var(--orange);
    }
    .ranking-filter-button .material-symbols-rounded { font-size: 16px; }
    .ranking-filter-field .filter-popover { top: 62px; }
    .ranking-filter-field:nth-child(even) .filter-popover { right: 0; left: auto; }
    .explorer-body {
      min-height: 0;
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      border-top: 1px solid var(--line);
    }
    .ranking-types {
      min-height: 0;
      padding: 18px 14px;
      overflow-y: auto;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }
    .rail-heading { margin: 0 8px 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .ranking-type {
      width: 100%;
      min-height: 44px;
      margin-bottom: 5px;
      padding: 9px 10px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 9px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
    }
    .ranking-type:hover { background: rgba(255,255,255,.65); }
    .ranking-type.active { color: #fff; background: var(--ink); }
    .ranking-type small { margin-left: auto; color: var(--soft); font-size: 9px; }
    .ranking-type.active small { color: #d5d1ca; }
    .ranking-browser { min-height: 0; padding: 18px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
    .browser-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
    .browser-heading strong { font-size: 14px; }
    .browser-heading span { color: var(--muted); font-size: 10px; }
    .ranking-columns { min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
    .root-ranking-list, .subranking-list {
      min-height: 0;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
    }
    .root-ranking-button {
      width: 100%;
      padding: 11px 12px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 9px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
    }
    .root-ranking-button:last-child { border-bottom: 0; }
    .root-ranking-button:hover { background: var(--canvas); }
    .root-ranking-button.active { color: #fff; background: var(--ink); }
    .root-ranking-button span:last-child { margin-left: auto; color: var(--soft); font-size: 9px; }
    .ranking-result {
      width: 100%;
      padding: 12px 14px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      text-align: left;
    }
    .ranking-result:last-child { border-bottom: 0; }
    .ranking-result:hover { background: var(--canvas); }
    .ranking-result.is-selected {
      color: var(--ink);
      background: #fff3ec;
      box-shadow: inset 4px 0 0 var(--orange);
    }
    .root-ranking-button.is-selected { box-shadow: inset 4px 0 0 var(--orange); }
    .ranking-type.is-selected { box-shadow: inset 0 0 0 2px var(--orange); }
    .ranking-result-name { display: block; font-size: 11px; font-weight: 750; }
    .ranking-result-path { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ranking-result-insights { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 7px; color: var(--muted); font-size: 9px; }
    .ranking-result-insights strong { color: var(--ink); font-weight: 750; }
    .ranking-result-meta { align-self: center; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .ranking-result-meta.match { color: var(--orange); font-weight: 800; }
    .ranking-empty { padding: 40px 20px; color: var(--muted); text-align: center; font-size: 11px; }
    .explorer-actions {
      min-height: 72px;
      padding: 12px 22px;
      border-top: 1px solid var(--line);
      background: var(--paper);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .selected-ranking-summary {
      min-width: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
    }
    .selected-ranking-summary strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .confirm-ranking-selection {
      min-width: 210px;
      height: 44px;
      padding: 0 18px;
      border: 0;
      border-radius: 13px;
      color: #fff;
      background: var(--orange);
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
    }
    .confirm-ranking-selection:hover:not(:disabled) { filter: brightness(.94); }
    .confirm-ranking-selection:disabled {
      color: var(--soft);
      background: var(--panel);
      cursor: not-allowed;
    }

    .filter-card {
      position: relative;
      overflow: visible;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }
    .filter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
    }
    .filter-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 750; }
    .filter-meta { color: var(--muted); font-size: 12px; }
    .filter-toggle {
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .filter-main {
      display: grid;
      grid-template-columns: 1.4fr 1fr auto;
      gap: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line);
    }
    .field { min-width: 0; }
    .field label {
      display: block;
      margin: 0 0 8px 5px;
      color: #53504c;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .control {
      width: 100%;
      height: 44px;
      padding: 0 16px;
      border: 1px solid var(--line);
      border-radius: 22px;
      outline: none;
      color: var(--ink);
      background: var(--paper);
      transition: .2s ease;
    }
    .control:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 28, 26, .06); }
    .search-wrap { position: relative; }
    .search-wrap .material-symbols-rounded {
      position: absolute;
      left: 15px;
      top: 12px;
      color: var(--soft);
      pointer-events: none;
    }
    .search-wrap .control { padding-left: 44px; }
    select.control { appearance: none; cursor: pointer; padding-right: 42px; }
    .select-wrap { position: relative; }
    .select-wrap > .material-symbols-rounded {
      position: absolute;
      right: 14px;
      bottom: 12px;
      pointer-events: none;
    }
    .search-button {
      align-self: end;
      height: 44px;
      padding: 0 24px;
      border: 0;
      border-radius: 22px;
      background: var(--orange);
      color: #fff;
      font-weight: 750;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 9px 20px rgba(239, 91, 42, .2);
      transition: .2s ease;
    }
    .search-button:hover { background: #d94d20; transform: translateY(-1px); }
    .filter-more {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      padding-top: 20px;
      max-height: 140px;
      opacity: 1;
      transition: .25s ease;
    }
    .filter-more .field { position: relative; }
    .filter-more.collapsed { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; }
    .capsule {
      width: 100%;
      height: 40px;
      padding: 0 14px;
      border: 1px solid var(--dark);
      border-radius: 20px;
      color: #fff;
      background: var(--dark);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
    }
    .capsule:hover { background: #33312e; }
    .filter-popover {
      position: absolute;
      top: 68px;
      left: 0;
      z-index: 30;
      width: min(290px, calc(100vw - 32px));
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      box-shadow: var(--shadow);
      display: none;
    }
    .filter-more .field:nth-child(even) .filter-popover { right: 0; left: auto; }
    .filter-popover.open { display: block; }
    .range-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .range-field label {
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .range-input {
      width: 100%;
      height: 38px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      outline: none;
      color: var(--ink);
      background: var(--paper);
      font-size: 12px;
    }
    .range-input:focus { border-color: var(--ink); }
    .filter-apply {
      width: 100%;
      height: 38px;
      margin-top: 12px;
      border: 0;
      border-radius: 10px;
      color: #fff;
      background: var(--ink);
      cursor: pointer;
      font-size: 12px;
      font-weight: 750;
    }
    .filter-footer {
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
    .active-chip {
      height: 30px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--paper);
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .clear-button {
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    
/* ===== 分类页适配：单列浏览（无榜单类型栏） ===== */
.explorer-body { grid-template-columns: minmax(0, 1fr); }
.ranking-types { display: none; }

/* ===== 分页器（fabuk page-button 样式） ===== */
.pagination{margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:8px}
.page-button{min-width:42px;height:42px;padding:0 14px;border:1px solid #c8c3bc;border-radius:21px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:750;transition:.2s ease;color:#1d1c1a}
.page-button:hover:not(:disabled),.page-button.active{color:#fff;border-color:#1d1c1a;background:#1d1c1a}
.page-button:disabled{opacity:.38;cursor:not-allowed}
.page-button svg{width:16px;height:16px}
/* View More 胶囊按钮（广告分类页 · 2026-09-09） */
.view-more-wrap{margin:34px auto 8px;display:flex;justify-content:center;align-items:center}
.view-more-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 42px;border-radius:999px;background:var(--orange);color:#fff;font-size:15px;font-weight:800;letter-spacing:.3px;text-decoration:none;box-shadow:0 6px 18px rgba(239,91,42,.3);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.view-more-btn:hover{background:#d94e1f;transform:translateY(-1px);box-shadow:0 8px 22px rgba(239,91,42,.38)}
.view-more-btn:active{transform:translateY(0)}
.view-more-btn .icon{flex:0 0 auto}
@media (max-width:760px){.view-more-wrap{margin:28px 24px 8px}.view-more-btn{width:100%;justify-content:center;padding:15px 24px}}




/* BestDealer 商品卡（去 hover 覆盖层） */

/* ===== 结果头部（参考榜单 code.html） ===== */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px 0 18px;
}
.results-title { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: #1d1c1a; }
.results-count { margin-top: 5px; color: #6e6a65; font-size: 12px; }
.sort-button {
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dedbd6;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1d1c1a;
  font-family: inherit;
  transition: .2s ease;
}
.sort-button:hover { border-color: #c8c3bc; }

.productList{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 16px;position:relative}
@media (max-width:1200px){.productList{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.productList{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.productList{grid-template-columns:repeat(2,1fr)}}
.product-item-block{position:relative;border-radius:10px;padding:5px;border:1px solid #ededed;text-decoration:none;color:inherit}
.product-item{position:relative;cursor:pointer;height:100%}
@media (hover:hover){.product-item:hover{border-radius:10px;box-shadow:0 0 0 10px #fff,rgba(110,113,122,.05) -18px 0 16px,rgba(110,113,122,.05) 18px 0 16px,rgba(110,113,122,.05) 0 -18px 16px,rgba(110,113,122,.05) 0 18px 16px}}
.product-item-thumbnail{position:relative;border-radius:8px;overflow:hidden}
.product-item-thumbnail__image{display:block;aspect-ratio:1/1;width:100%;transition:.2s ease-in-out}
.product-item-thumbnail__image{position:relative;overflow:hidden}
.thumb-blur{position:absolute;inset:-10px;background-size:cover;background-position:center;filter:blur(18px) brightness(.85);transform:scale(1.1);z-index:0}
.product-item-thumbnail__image .c-image__img{position:relative;z-index:1}
.product-item-thumbnail__image img{width:100%;height:100%;object-fit:contain;object-position:center}
.product-item-buttons{display:flex;position:absolute;top:8px;right:8px;opacity:0;transition:.2s ease-in-out;z-index:3}
.product-item-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;color:#1d1c1a;background:rgba(255,255,255,.9);border:1px solid #e5e5e5;border-radius:50%;cursor:pointer;transition:.2s ease-in-out;padding:0}
.product-item-button:hover{filter:brightness(.8)}
.product-item-button__similar{background:rgba(255,255,255,.9);color:#1d1c1a}
.product-item-content{position:relative;padding:8px}
.product-item__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:12px;line-height:16px;min-height:32px;color:#1d1c1a}
.product-item__price{margin-top:6px;font-weight:700;font-size:18px;color:#232323;display:flex;align-items:center;gap:1px}
.product-item__price .currency{font-size:12px;font-weight:700;vertical-align:2px}
/* 折扣卡（2026-09-09 · 参考 pet-supplies-折扣模板） */
.product-item__discount{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;gap:2px;padding:5px;border-radius:5px 0;color:#fff;background:#ea591f;font-size:11px;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(210,81,35,.18)}
.product-item__discount img{width:12px;height:12px;object-fit:contain;filter:brightness(0) invert(1)}
.product-item__pricing{min-height:25px;margin-top:6px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.product-item__original{color:#a2a2a2;font-size:12px;font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}
.product-item__saving{min-height:16px;color:#d25123;font-size:12px;font-weight:700;line-height:16px}
.product-item__saving--regular{color:#8b8b8b;font-weight:500}
.product-item__order{font-weight:500;font-size:10px;line-height:14px;color:#6e717a}
.product-item__scores{margin-top:-6px;display:flex;align-items:center}
.product-item__rate{font-size:14px;line-height:1;display:flex}
.rate-item{position:relative;width:14px;height:14px;margin-right:0}
.rate-item__icon{position:absolute;inset:0;width:14px;height:14px}
.rate-item__icon--full{overflow:hidden}
.product-item__score{margin-left:2px;font-weight:500;font-size:11px;line-height:14px;color:#232323}
.product-item__divider{margin:0 6px;height:8px;width:1px;background:#dfdfdf}
.product-item__sold{font-weight:500;font-size:11px;line-height:14px;color:#6e717a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (hover:hover){
.product-item-buttons{display:flex}
.product-item:hover .product-item-buttons{opacity:1}
.product-item:hover .product-item-thumbnail__image{transform:scale(1.2)}
}
.icon{flex:none}

/* ===== SEO 长文指南 ===== */
.guide{max-width:1480px;margin:40px auto 0;padding:0 24px}
.guide-card{background:#fff;border:1px solid #dedbd6;border-radius:18px;padding:34px 40px}
.guide-card h2{font-size:26px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px;color:#1d1c1a}
.guide-card h3{font-size:18px;font-weight:750;margin:28px 0 10px;color:#1d1c1a}
.guide-card h4{font-size:15px;font-weight:700;margin:18px 0 6px;color:#1d1c1a}
.guide-card p{font-size:14px;line-height:1.7;color:#44403a;margin-bottom:10px}
.guide-card ul{margin:0 0 14px 20px;font-size:14px;line-height:1.7;color:#44403a}
.guide-card li{margin-bottom:4px}
.guide-table-wrap{overflow-x:auto;margin:12px 0 14px}
.guide-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.guide-table th{background:#f6f5f2;text-align:left;padding:10px 12px;font-size:12px;font-weight:700;color:#6e6a65;border-bottom:1px solid #dedbd6;white-space:nowrap}
.guide-table td{padding:9px 12px;border-bottom:1px solid #efeeeb;color:#1d1c1a}
.guide-table tr:hover td{background:#faf9f7}
.faq-item{margin-bottom:16px}
.faq-item h4{font-size:14.5px;font-weight:700;margin-bottom:4px;color:#1d1c1a}
.faq-item p{font-size:13.5px;margin:0;color:#44403a}
/* ===== Related / Discover 内链群 ===== */
.link-block{max-width:1480px;margin:30px auto 0;padding:0 24px}
.link-block h3{font-size:15px;font-weight:750;margin-bottom:12px;color:#1d1c1a}
.link-chips{display:flex;flex-wrap:wrap;gap:8px}
.link-chips a{font-size:13px;color:#1d1c1a;text-decoration:none;background:#fff;border:1px solid #dedbd6;border-radius:20px;padding:7px 15px;transition:.15s ease}
.link-chips a:hover{border-color:#0c5a9f;background:#f0f7fc}
@media(max-width:900px){.guide{padding:0 16px}.guide-card{padding:22px 18px}}


/* ===== Explorer 弹窗：分类浏览器（fabuk 原样） ===== */
.explorer-body{min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr);border-top:1px solid #dedbd6}
@media(max-width:760px){.explorer-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}}
.ranking-types{min-height:0;padding:18px 14px;overflow-y:auto;border-right:1px solid #dedbd6;background:#efeeeb}
@media(max-width:760px){.ranking-types{padding:10px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid #dedbd6;display:flex;gap:6px}}
.rail-heading{margin:0 8px 10px;color:#6e6a65;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.rail-heading{display:none}}
.ranking-browser{min-height:0;padding:18px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr)}
@media(max-width:760px){.ranking-browser{padding:12px}}
.browser-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.browser-heading strong{font-size:14px}
.browser-heading span{color:#6e6a65;font-size:10px}
.ranking-columns{min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px}
@media(max-width:760px){.ranking-columns{grid-template-columns:42% minmax(0,1fr);gap:8px}}
.root-ranking-list,.subranking-list{min-height:0;overflow-y:auto;border:1px solid #dedbd6;border-radius:16px;background:#fff}
.ranking-result{width:100%;padding:12px 14px;border:0;border-bottom:1px solid #dedbd6;background:transparent;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;text-align:left;text-decoration:none;color:inherit;font-family:inherit}
.ranking-result:last-child{border-bottom:0}
.ranking-result:hover{background:#f6f5f2}
.ranking-result.is-selected{color:#1d1c1a;background:#fff3ec;box-shadow:inset 4px 0 0 #ef5b2a}
.ranking-result-name{display:block;font-size:11px;font-weight:750;color:#1d1c1a}
.ranking-result-path{display:block;margin-top:4px;color:#6e6a65;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-result-meta{align-self:center;color:#6e6a65;font-size:9px;white-space:nowrap}
.ranking-result-meta.match{color:#ef5b2a;font-weight:800}
.ranking-empty{padding:40px 20px;color:#6e6a65;text-align:center;font-size:11px}


/* ===== 导航栏 Categories 按钮 ===== */
.top-actions .nav-categories-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #c8c3bc;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  color: #1d1c1a;
  font-family: inherit;
  transition: .2s ease;
}
.top-actions .nav-categories-btn:hover {
  border-color: #ef5b2a;
  color: #ef5b2a;
}

/* 触摸设备：无 hover，按钮常显 */
@media (hover:none), (pointer:coarse){
  .product-item-buttons{opacity:1}
}

.product-item-button__similar:hover{background:#f57231;color:#fff;border-color:#f57231}

/* ===== Category Explorer v3: search-first navigation ===== */
.search-mark{background:transparent}
.explorer-search>.material-symbols-rounded{position:static;left:auto;pointer-events:none}
.ranking-dialog .ranking-search-input:focus-visible{outline:none}
.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
.ranking-explorer{padding:20px;background:rgba(29,28,26,.56);backdrop-filter:blur(9px)}
.ranking-dialog{width:min(1280px,100%);height:min(900px,calc(100vh - 40px));border:1px solid rgba(255,255,255,.7);border-radius:22px;background:#fbfaf8;box-shadow:0 28px 88px rgba(0,0,0,.28);grid-template-rows:auto auto auto auto minmax(0,1fr) auto}
.explorer-header{padding:24px 28px 14px}.explorer-title{font-size:25px;font-weight:800;letter-spacing:-.035em}.explorer-subtitle{margin-top:5px;font-size:13px;line-height:1.4}
.close-explorer{width:44px;height:44px;border-color:#d8d5d0;background:#fff;transition:background .16s ease,border-color .16s ease,transform .16s ease}.close-explorer:hover{border-color:#bdb8b1;background:#f2f0ed}.close-explorer:active{transform:scale(.96)}
.explorer-search-wrap{position:relative;margin:0 28px 10px}.explorer-search{height:64px;margin:0;padding:0 18px;border:1px solid #c9c5bf;border-radius:32px;background:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;transition:border-color .16s ease,box-shadow .16s ease}.explorer-search:focus-within{border-color:#67615a;box-shadow:0 0 0 3px rgba(239,91,42,.13)}.explorer-search .material-symbols-rounded{color:#393632}
.ranking-search-input{width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:#1d1c1a;font:inherit;font-size:17px}.ranking-search-input:focus{border-color:transparent}.ranking-search-input::-webkit-search-cancel-button{display:none}
.explorer-search kbd,.explorer-footer kbd{min-width:28px;height:25px;padding:0 7px;border:1px solid #d8d5d0;border-radius:6px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04);color:#5d5852;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:11px;font-weight:700}
.search-clear{position:absolute;top:50%;right:62px;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:#f2f0ed;color:#4f4b46;cursor:pointer;place-items:center}.search-clear:not([hidden]){display:grid}.search-clear .material-symbols-rounded{font-size:18px}
.explorer-recents{min-height:40px;padding:0 28px 10px;color:#6e6a65;display:flex;align-items:center;gap:10px;font-size:12px}.explorer-recents[hidden]{display:none}.explorer-recents>.material-symbols-rounded{font-size:18px}.explorer-recents strong{color:#47433e;font-size:12px;white-space:nowrap}.recent-searches{min-width:0;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.recent-searches::-webkit-scrollbar{display:none}.recent-search{height:28px;padding:0 12px;border:1px solid #e2dfda;border-radius:14px;background:#fff;color:#4f4b46;cursor:pointer;white-space:nowrap;font:inherit;font-size:11px}
.category-tabs{min-height:54px;padding:0 28px;border-top:1px solid #e5e2dd;border-bottom:1px solid #d9d5cf;display:flex;align-items:end;gap:4px;overflow-x:auto;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{position:relative;min-width:max-content;height:53px;padding:0 14px;border:0;background:transparent;color:#4d4944;cursor:pointer;font:inherit;font-size:12px;font-weight:650}.category-tab span{margin-left:5px;color:#9a948d;font-size:10px;font-weight:700}.category-tab:hover,.category-tab.active{color:#1d1c1a}.category-tab.active span{color:#ef5b2a}.category-tab.active:after{content:"";position:absolute;right:10px;bottom:-1px;left:10px;height:3px;border-radius:3px 3px 0 0;background:#ef5b2a}
.explorer-body{min-height:0;grid-template-columns:minmax(260px,32%) minmax(0,1fr);border-top:0;background:#fbfaf8}.subcategory-pane,.page-pane{min-height:0;overflow:hidden;display:grid}.subcategory-pane{grid-template-rows:auto minmax(0,1fr);padding:22px 18px 18px 28px;border-right:1px solid #dfdcd7}.pane-heading{min-height:34px;padding:0 10px 10px;display:flex;align-items:baseline;gap:8px}.pane-heading strong{font-size:14px}.pane-heading span{color:#8a847d;font-size:11px}
.subcategory-list{min-height:0;overflow-y:auto;border:1px solid #e0ddd8;border-radius:13px;background:#fff}.subcategory-choice{position:relative;width:100%;min-height:48px;padding:10px 36px 10px 14px;border:0;border-bottom:1px solid #ece9e4;background:transparent;color:#34312e;cursor:pointer;text-align:left;font:inherit}.subcategory-choice:last-child{border-bottom:0}.subcategory-choice:hover{background:#f8f6f3}.subcategory-choice:after{content:"›";position:absolute;top:50%;right:14px;color:#77716b;font-size:20px;transform:translateY(-54%)}.subcategory-choice.active{background:#fff3ec;box-shadow:inset 3px 0 0 #ef5b2a}.subcategory-choice strong{display:block;overflow:hidden;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.subcategory-choice small{display:block;margin-top:4px;color:#827c75;font-size:10px}.search-mark{color:#dc4c1e;font-weight:800}
.page-pane{padding:22px 28px 18px 20px;grid-template-rows:auto minmax(0,1fr) auto}.page-pane-head{min-height:80px;padding:0 6px 14px;border-bottom:1px solid #e3e0db;display:flex;align-items:end;justify-content:space-between;gap:20px}.page-breadcrumb{min-height:18px;margin-bottom:7px;color:#77716b;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-breadcrumb span+span:before{content:"›";margin:0 7px;color:#aaa49d}.page-breadcrumb span:last-child{color:#ef5b2a}.page-title-row{display:flex;align-items:center;gap:9px}.page-title-row strong{font-size:18px;letter-spacing:-.02em}.page-title-row span{color:#77716b;font-size:11px}#rankingNodeCount{margin:4px 0 0;color:#8a847d;font-size:10px}
.page-sort{display:flex;align-items:center;gap:8px;color:#77716b;font-size:10px;white-space:nowrap}.page-sort select{height:36px;padding:0 30px 0 11px;border:1px solid #d7d3cd;border-radius:8px;background:#fff;color:#34312e;font:inherit;font-size:11px;font-weight:650}
.subranking-list{min-height:0;overflow-y:auto;border:0;border-radius:0;background:transparent}.category-page{min-height:62px;padding:10px;border-bottom:1px solid #e6e3de;color:#2f2c29;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;text-decoration:none;transition:background .14s ease}.category-page:hover,.category-page.keyboard-active{background:#fff3ec}.category-page .material-symbols-rounded{color:#77716b;font-size:22px}.category-page strong{display:block;overflow:hidden;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.category-page small{display:block;margin-top:4px;overflow:hidden;color:#8a847d;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.category-page>.material-symbols-rounded:last-child{color:#6b655f;font-size:19px}
.explorer-pagination{min-height:50px;padding-top:12px;display:flex;align-items:center;justify-content:center;gap:5px}.explorer-page-button{min-width:34px;height:34px;padding:0 9px;border:1px solid #ddd9d3;border-radius:7px;background:#fff;color:#4c4843;cursor:pointer;font:inherit;font-size:11px;font-weight:700}.explorer-page-button:hover:not(:disabled){border-color:#9d968e}.explorer-page-button.active{border-color:#ef5b2a;color:#d94e20;background:#fff7f3}.explorer-page-button:disabled{opacity:.4;cursor:default}.explorer-pagination-ellipsis{padding:0 3px;color:#8a847d}
.explorer-empty{min-height:180px;padding:36px 24px;color:#77716b;display:grid;place-content:center;gap:7px;text-align:center;font-size:11px}.explorer-empty strong{color:#34312e;font-size:14px}.explorer-retry{width:max-content;height:34px;margin:10px auto 0;padding:0 14px;border:1px solid #cfcac4;border-radius:8px;background:#fff;cursor:pointer;font:inherit;font-size:11px;font-weight:700}
.explorer-footer{min-height:54px;padding:8px 28px;border-top:1px solid #ddd9d3;background:#f5f3f0;display:flex;align-items:center;gap:18px;color:#77716b;font-size:10px}.explorer-footer>div{display:flex;align-items:center;gap:5px}.explorer-footer>div span{margin-left:2px}.explorer-footer p{margin:0 0 0 auto;text-align:right}
.ranking-dialog button:focus-visible,.ranking-dialog a:focus-visible,.ranking-dialog input:focus-visible,.ranking-dialog select:focus-visible{outline:3px solid rgba(239,91,42,.32);outline-offset:2px}
@media(max-width:900px){.ranking-explorer{padding:0}.ranking-dialog{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}.explorer-header{padding:17px 18px 11px}.explorer-title{font-size:21px}.explorer-subtitle{font-size:11px}.close-explorer{width:40px;height:40px}.explorer-search-wrap{margin:0 18px 8px}.explorer-search{height:52px}.ranking-search-input{font-size:15px}.explorer-search kbd{display:none}.search-clear{right:12px}.explorer-recents{padding:0 18px 8px}.category-tabs{min-height:47px;padding:0 12px}.category-tab{height:46px;padding:0 11px}.explorer-body{grid-template-columns:minmax(220px,38%) minmax(0,1fr)}.subcategory-pane{padding:14px 10px 12px 12px}.page-pane{padding:14px 12px 12px 10px}.page-pane-head{min-height:72px}.page-title-row strong{font-size:16px}.explorer-footer{padding:7px 14px}}
@media(max-width:640px){.explorer-body{grid-template-columns:1fr;grid-template-rows:minmax(150px,36%) minmax(0,1fr)}.subcategory-pane{border-right:0;border-bottom:1px solid #dfdcd7}.subcategory-list{border-radius:10px}.page-pane-head{align-items:start}.page-sort span{display:none}.page-sort select{width:88px}.category-page{min-height:55px}.explorer-footer{min-height:46px;gap:10px}.explorer-footer>div:nth-child(2),.explorer-footer>div:nth-child(3),.explorer-footer p{display:none}}
/* Toast（2026-09-09 修复：默认隐藏，不再显示 Action completed） */
.toast{position:fixed;left:50%;bottom:36px;z-index:9999;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;background:#1d1c1a;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 品牌区标签（广告/折扣页） */
.fabulk-tag{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 10px;border-radius:999px;background:var(--orange-soft);color:var(--orange);font-size:12px;font-weight:800;vertical-align:3px;line-height:1.4}
.fabulk-brand{margin-top:4px}
.fabulk-brand .guide-card h3{margin-bottom:12px}