/* ================= 共通 ================= */
  .bb-wrap{width:min(1400px,94.4%);margin:18px auto 0;padding-bottom:40px}
  .thumb-ph{background:linear-gradient(135deg,#eef2fa,#dde6f4);display:inline-block}
  .line2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

  /* 面包屑 */
  .bb-crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:#8a97ad;font-weight:600}
  .bb-crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--navy);text-decoration:none}
  .bb-crumb a:hover{color:var(--blue)}
  .bb-crumb a svg{width:16px;height:16px}
  .bb-crumb .sep{color:#b9c6dd}

  /* ================= 搜索框（Figma 586:611） ================= */
  .bb-search form{display:flex;align-items:center;gap:14px;background:#fff;border-radius:999px;
    padding:8px 8px 8px 26px;margin-top:14px;
    box-shadow:0 20px 44px -28px rgba(11,43,102,.6);border:1px solid #e6eefc}
  .bb-search .si{display:grid;place-items:center;flex:none;color:var(--navy)}
  .bb-search .si svg{width:22px;height:22px}
  .bb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;
    font-size:15px;font-weight:600;color:var(--navy)}
  .bb-search input::placeholder{color:#9aa7bd}
  .bb-search button{flex:none;border:0;cursor:pointer;border-radius:999px;
    background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));color:#fff;
    font-family:var(--round);font-weight:800;font-size:16px;letter-spacing:.1em;
    min-width:110px;height:52px;transition:.25s}
  .bb-search button:hover{filter:brightness(1.12)}
  @media(max-width:600px){
    .bb-search form{flex-wrap:wrap;padding:10px 12px;border-radius:22px;gap:8px}
    .bb-search input{flex-basis:calc(100% - 36px);height:40px;font-size:14px}
    .bb-search button{flex-basis:100%;height:46px;min-width:0}
  }

  /* ================= 分类筛选（参考 /news 的分段样式） ================= */
  .bb-tabs{display:flex;margin-top:18px}
  /* 第一个「すべて」独立等宽 */
  .bb-tabs > button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    height:64px;padding:0 14px;border:1px solid #e3edf9;border-radius:12px;background:#fff;
    font-weight:500;font-size:15px;color:#26324a;cursor:pointer;transition:.2s;
    white-space:nowrap;overflow:hidden;margin-right:18px}
  .bb-tabs > button svg{width:22px;height:22px;flex:none;color:#5a6b8c}
  /* 其余分类连成一个整体，仅一圈外边框 */
  .bb-tabs-seg{flex:4 1 0;display:flex;border:1px solid #e3edf9;border-radius:12px;
    background:#fff;overflow:hidden}
  .bb-tabs-seg button{position:relative;flex:1 1 0;min-width:0;height:62px;display:inline-grid;
    grid-auto-flow:column;align-items:center;justify-content:center;gap:8px;padding:0 10px;
    border:0;background:transparent;font-weight:500;font-size:15px;color:#26324a;
    cursor:pointer;transition:.2s;white-space:nowrap;overflow:hidden}
  .bb-tabs-seg button svg{width:22px;height:22px;grid-column:1;grid-row:1;color:#5a6b8c}
  .bb-tabs-seg button + button:not(.active)::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:30px;background:#dbe6f4;z-index:0}
  .bb-tabs-seg button.active + button::before{display:none}
  .bb-tabs-seg button:not(.active):hover{background:#f7faff}
  /* 选中项 */
  .bb-tabs-seg button.active{z-index:2;color:#fff;
    background:linear-gradient(135deg,#000969,#1f4191);
    border:0;border-radius:10px;height:64px;align-self:stretch;margin:-1px}
  .bb-tabs-seg button.active svg{color:#fff}
  .bb-tabs > button.active{border-color:transparent;color:#fff;
    background:linear-gradient(135deg,#000969,#1f4191)}
  .bb-tabs > button.active svg{color:#fff}
  @media(max-width:760px){
    .bb-tabs{flex-wrap:wrap;gap:8px}
    .bb-tabs > button{flex:1 1 calc(33.333% - 8px);height:52px;margin-right:0;padding:0 10px;
      font-size:13px;border-radius:10px}
    .bb-tabs-seg{flex:2 1 calc(66.666% - 8px);flex-wrap:wrap;gap:8px;border:0;background:transparent;
      overflow:visible;border-radius:0}
    .bb-tabs-seg button{flex:1 1 calc(50% - 8px);min-width:130px;height:52px;padding:0 10px;
      font-size:13px;border:1px solid #e3edf9;border-radius:10px;background:#fff}
    .bb-tabs-seg button::before{display:none !important}
    .bb-tabs-seg button.active{margin:0;height:52px;border-color:transparent;border-radius:10px}
    .bb-tabs > button.active{flex:1 1 calc(33.333% - 8px)}
  }

  /* ================= 2×2 彩色价格面板（Figma 588:810 他） ================= */
  .bb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}
  .bb-panel{border-radius:16px;padding:18px 20px 10px}
  .bb-panel.gold{background:#fdf6e0}
  .bb-panel.blue{background:#e9f1fe}
  .bb-panel.pink{background:#fdeaef}
  .bb-panel.violet{background:#f0eafc}
  .bb-phead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .bb-ico{width:50px;height:50px;display:grid;place-items:center;flex:none}
  .bb-ico.circle{border-radius:50%}
  .bb-ico.sq{border-radius:15px}
  .bb-ico.gold{background:#ffd97a;color:#9a6a00}
  .bb-ico.blue{background:linear-gradient(135deg,#4f86e8,#2050b8);color:#fff}
  .bb-ico.pink{background:linear-gradient(135deg,#f4707f,#d83a4e);color:#fff}
  .bb-ico.violet{background:linear-gradient(135deg,#9a7bf5,#6a44d6);color:#fff}
  .bb-ico svg{width:26px;height:26px}
  .bb-phead h3{font-family:var(--round);font-weight:800;font-size:19px;
    color:var(--navy);line-height:1.3;margin:0}
  .bb-phead .en{display:block;font-size:10px;letter-spacing:.16em;color:#8aa0c6;font-weight:700}
  /* 行 */
  .bb-row{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
    padding:10px 8px;border-top:1px dashed rgba(11,43,102,.14);transition:.2s}
  .bb-row:first-of-type{border-top:0}
  .bb-row:hover{background:rgba(255,255,255,.7);border-radius:12px}
  .bb-row .thumb{width:66px;height:66px;border-radius:12px;object-fit:cover;
    flex:none;background:#fff}
  .bb-row .info{flex:1;min-width:0}
  .bb-row .info b{font-family:var(--round);font-weight:800;font-size:15px;
    color:var(--navy);display:block;line-height:1.4}
  .bb-row .info small{color:var(--gray);font-weight:600;font-size:12px}
  .bb-row .price{text-align:right;flex:none;min-width:118px}
  .bb-row .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;
    padding:3px 9px;border-radius:6px;margin-bottom:4px}
  .bb-panel.gold .tag{background:#ffe9ad;color:#9a6a00}
  .bb-panel.blue .tag{background:#d4e4ff;color:#1d55bd}
  .bb-panel.pink .tag{background:#ffd9e0;color:#c42e44}
  .bb-panel.violet .tag{background:#e2d6ff;color:#5c35bd}
  .bb-row .tag.red{background:#ffe3e3;color:#c0392b}
  .bb-row .num{display:block;font-family:var(--round);font-weight:800;font-size:19px;color:var(--navy-deep)}
  .bb-row .chev{color:#aab9d4;flex:none}
  .bb-row .chev svg{width:18px;height:18px}
  .bb-pfoot{text-align:center;padding:10px 0 14px}
  .bb-pfoot a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
    font-family:var(--round);font-weight:800;font-size:14px;color:var(--navy);
    border:1.5px solid var(--navy);border-radius:999px;padding:11px 26px;transition:.25s;background:#fff}
  .bb-pfoot a svg{width:13px;height:13px;transition:transform .25s}
  .bb-pfoot a:hover{background:var(--navy);color:#fff}
  .bb-pfoot a:hover svg{transform:translateX(3px)}
  @media(max-width:900px){
    .bb-grid{grid-template-columns:1fr;gap:16px}
  }
  @media(max-width:600px){
    .bb-panel{padding:14px 14px 8px}
    .bb-phead h3{font-size:16px}
    .bb-ico{width:42px;height:42px}
    .bb-row{gap:10px;padding:10px 4px}
    .bb-row .thumb{width:54px;height:54px}
    .bb-row .info b{font-size:13.5px}
    .bb-row .price{min-width:0}
    .bb-row .num{font-size:16px}
  }