/* /mansion/{slug}/sell/ · /mansion/{slug}/buy/ の追加スタイル。
   本体の style.css をそのまま使い、この2面にしか出ない部品だけをここに置く。
   トーンは棟ページ(落ち着いた青緑)を基調にする。ポップなのは登録フォーム部品側
   (_subscribe_form.html が自前で持っている)。 */

/* ---- 上部の看板「この棟の売られ方」 ------------------------------------- */
.board{
  margin:26px 0 30px; padding:22px 22px 18px; border-radius:18px;
  background:linear-gradient(180deg,#f4fbfa,#ffffff);
  border:1px solid #d9ebe9;
}
.board h2{margin:0 0 4px; font-size:1.18rem; border:0; padding:0}
.board .bsub{margin:0 0 16px; font-size:.86rem; color:#6b8189}
.board .kpis{margin:0}
.board .note{margin-top:12px}

/* ---- AI査定レンジ -------------------------------------------------------- */
.airange{margin:18px 0 10px}
.airange .arbar{
  position:relative; height:56px; margin:22px 0 8px;
  border-radius:12px; background:#eef5f4;
}
.airange .arfill{
  position:absolute; top:0; bottom:0; left:8%; right:8%;
  border-radius:12px;
  background:linear-gradient(90deg,#9fdedb,#2eb6af 50%,#9fdedb);
}
.airange .armid{
  position:absolute; top:-6px; bottom:-6px; width:3px; border-radius:2px;
  background:#12333f;
}
.airange .arends{display:flex; justify-content:space-between; font-size:.82rem; color:#6b8189}
.airange .arnums{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; flex-wrap:wrap; margin-top:6px;
}
.airange .arnums b{font-size:1.5rem; color:#12333f; font-weight:700}
.airange .arnums b small{font-size:.86rem; font-weight:600; margin-left:2px}
.airange .arspec{font-size:.84rem; color:#6b8189}
.acc{
  margin:10px 0 0; padding:11px 15px; border-radius:12px;
  background:#f2f7f6; border:1px solid #dcebe9;
  font-size:.88rem; color:#28454e; line-height:1.7;
}
.acc b{color:#0a8079}

/* ---- 手取り目安 ---------------------------------------------------------- */
.netbox{margin:14px 0 6px}
.netbox table{width:100%; border-collapse:collapse; font-size:.93rem; table-layout:fixed}  /* 2026-09-01 スマホで右にはみ出さないよう列幅を固定 */
.netbox td{padding:9px 6px; border-bottom:1px solid #e9efee; word-break:normal; overflow-wrap:anywhere}
.netbox td.num{text-align:right; white-space:nowrap; width:38%}
.netbox tr.total td{border-top:2px solid #c9dedb; border-bottom:0;
  font-weight:700; font-size:1.05rem; color:#12333f; padding-top:12px}

/* ---- いまの売出(板) ------------------------------------------------------ */
.slots{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 8px}
.slot{
  flex:1 1 150px; padding:14px 16px; border-radius:14px;
  background:#fff; border:1px solid #e2ecea;
}
.slot .sl{display:block; font-size:.78rem; color:#6b8189; margin-bottom:4px}
.slot .sv{font-size:1.34rem; font-weight:700; color:#12333f}
.slot .sv small{font-size:.8rem; font-weight:600; margin-left:2px}
.slot.none .sv{color:#8fa3aa; font-size:1.05rem}

/* ---- 棟別の登録者カウント ------------------------------------------------ */
.mcount{
  margin:18px 0; padding:16px 18px; border-radius:16px;
  background:#fff7e8; border:1px solid #ffe1ad; color:#7a5310;
  font-size:.95rem; line-height:1.7;
}
.mcount b{font-size:1.5rem; color:#b06f04; padding:0 3px; font-weight:800}
.mcount .mcwait{color:#7a5310; font-weight:700}
.mcount .mcnote{display:block; margin-top:4px; font-size:.8rem; color:#96775a}

/* ---- 当社の立場 ---------------------------------------------------------- */
.stance{
  margin:34px 0 10px; padding:20px 22px; border-radius:16px;
  background:#f7f9f9; border:1px solid #e2e9e9;
}
.stance h2{margin:0 0 10px; font-size:1.04rem; border:0; padding:0; color:#33474f}
.stance p{margin:0; font-size:.9rem; line-height:1.9; color:#48606a}

/* ---- 相互リンク(sell⇄buy⇄本体) ------------------------------------------ */
.sbnav{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 8px}
.sbnav a{
  flex:1 1 220px; display:block; padding:15px 18px; border-radius:14px;
  border:1px solid #d9ebe9; background:#fff; text-decoration:none; color:#12333f;
  font-weight:700; line-height:1.5;
}
.sbnav a small{display:block; font-weight:500; font-size:.8rem; color:#6b8189; margin-top:3px}
.sbnav a:hover{border-color:#2eb6af; background:#f6fcfb}

/* ---- 訂正窓口 ------------------------------------------------------------ */
.fixnote{margin:18px 0 0; font-size:.78rem; color:#8b9ba1; line-height:1.7}
.fixnote a{color:#6b8189}

@media(max-width:520px){
  .board{padding:18px 15px 14px; border-radius:14px}
  .airange .arnums b{font-size:1.3rem}
  .stance{padding:16px 15px}
}

/* ==========================================================================
   2026-09-01 v2 「見るページ」化。
   ユーザー検収で「文字ばかりで醜い・写真が無い・グラフが無い・物件概要すら無い」
   と差し戻しになったので、第一画面に 顔(写真/地図) + 物件概要 + KPI が入る構成に変えた。
   ★スマホ最優先。 PCは2カラム、スマホは1カラムで積む。
   ★帰属表示 (.hcredit) は Google / 国土地理院 / Wikimedia の規約上の必須。
     display:none にしたり、上に何かを重ねたりしないこと。
   ========================================================================== */

/* ---- ヒーロー: 建物の顔 + 物件概要 -------------------------------------- */
.hero{padding:0;overflow:hidden;border:1px solid var(--line)}
.herowrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
/* ★スマホ優先: まず素直に積む。 高さ合わせの flex は PC 幅でだけ効かせる
   (モバイルで flex-basis:0 を使うと、親に高さが無いので図が潰れて重なる。
    2026-09-01 の検収で実際に物件概要と写真が重なった)。 */
.hvis{background:#eef3f3;padding:0;min-width:0}
.hface,.hmap{margin:0;position:relative;background:#dfe8e8}
.hmap{border-top:1px solid rgba(255,255,255,.75)}
.hface .hphoto{display:block;width:100%;height:230px;
  object-fit:cover;object-position:center 35%}
.hface .svframe{display:block;width:100%;height:230px;border:0}
/* ---- ストリートビューは「写真カード」に見せる (2026-09-01) --------------
   ★sellbuy_parts.sv_aim() が撮影地点→棟の方位角を当てているので、
     ここに映っているのは建物の正面。 角丸+影で1枚の写真らしく見せる。
   ★操作UI (Google のロゴ・矢印・全画面) は iframe の中身。 かぶせないこと。 */
.hface.sv{padding:10px 10px 0;background:#eef3f3}
.hface.sv .svframe{border-radius:10px;background:#dfe8e8;
  box-shadow:0 2px 10px rgba(20,45,55,.20),0 0 0 1px rgba(20,45,55,.07)}
.hface.sv .hcredit{background:transparent;border-top:0;padding:6px 4px 9px;
  text-align:right;color:#5d7079}
.hcredit{margin:0;padding:5px 10px;font-size:10.5px;line-height:1.6;color:#4d6069;
  background:rgba(255,255,255,.88);border-top:1px solid rgba(0,0,0,.05)}
.hcredit a{color:#38606b;text-decoration:underline}
.hnote{margin:0;padding:8px 12px;font-size:11px;line-height:1.7;color:#5d7079;background:#e7eeee}
.hspec{padding:18px clamp(14px,2.4vw,22px) 16px;min-width:0}
.hspec h2.plain{margin:0 0 10px;font-size:15px;border:0;padding:0;letter-spacing:.02em}
.hspec .note{margin-top:12px}

/* 国土地理院タイルの静止地図。
   ★Leaflet を読まない (35,000ページに150KBのJSを配らない)。
   ★中身はインラインSVG。 <img> の絶対配置だと、箱の幅が可変のときに
     タイルとピンの座標がずれて下半分が白く抜ける (2026-09-01 検収で実害)。 */
.gsimap{display:block;width:100%;height:auto;background:#e7eeee}
.rvmap .gsimap{height:auto}

/* 物件概要の定義リスト */
dl.spec{margin:0;font-size:13px;line-height:1.75}
dl.spec>div{display:grid;grid-template-columns:6.6em 1fr;gap:0 10px;
  padding:7px 0;border-bottom:1px dashed #e6ecec}
dl.spec>div:last-child{border-bottom:0}
dl.spec dt{margin:0;color:var(--mut);font-size:11.5px;font-weight:700;letter-spacing:.02em}
dl.spec dd{margin:0;color:var(--ink-str);word-break:break-word}

/* ---- グラフ2枚並べ -------------------------------------------------------- */
.gr2{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:8px 20px;align-items:start;margin:6px 0 4px}
.gr2 .grcell{min-width:0}
.gr2 .grcell.wide{padding-top:14px}
.dnut{margin:0;text-align:center}
.dnut svg{width:132px;height:132px;max-width:100%}
.dnut figcaption{font-size:11.5px;color:var(--mut);line-height:1.6;margin-top:2px}

/* ---- 積み上げ帯 (売出 vs AI査定レンジ) ----------------------------------- */
.stk{margin:14px 0 4px}
.stkbar{display:flex;height:32px;border-radius:8px;overflow:hidden;background:#eef4f4}
.stkbar span{display:flex;align-items:center;justify-content:center;min-width:0;
  color:#fff;font-size:12px;font-weight:800}
.stkbar .lo{background:#1c9a94}
.stkbar .mid{background:#8ed4cf;color:#12333f}
.stkbar .hi{background:#d9836f}
.stkleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--mut)}
.stkleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.stkleg i.lo{background:#1c9a94}
.stkleg i.mid{background:#8ed4cf}
.stkleg i.hi{background:#d9836f}
.stkleg b{color:var(--ink-str)}

/* ---- 競合棟 -------------------------------------------------------------- */
.rvmap{margin:14px 0 6px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.rvmap .hcredit{border-top:1px solid var(--line-soft)}
table.rvtbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.rvtbl th{background:var(--soft);color:var(--mut);font-size:11px;font-weight:700;
  padding:8px 9px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
table.rvtbl td{padding:9px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.rvtbl td.num,table.rvtbl th.num{text-align:right;white-space:nowrap}
table.rvtbl td small{font-size:10.5px;color:var(--mut)}
table.rvtbl tr.me{background:#f2fbfa}
table.rvtbl tr.me td{border-bottom:1px solid #cbe8e5}
/* 地図のピン番号と表の行を結ぶバッジ */
.rvpin{display:inline-block;width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:50%;background:#d9483c;color:#fff;font-size:10.5px;font-weight:800;
  margin-right:6px;vertical-align:1px}
.rvpin.me{background:#12938d;font-size:9px}
.rvme{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:#fff;
  background:#1c9a94;border-radius:999px;padding:1px 7px;vertical-align:1px}

/* ---- 選ばれる理由 (buy面) ------------------------------------------------ */
.whys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:14px 0 6px}
.why{padding:15px 16px;border-radius:14px;background:linear-gradient(180deg,#f6fbfb,#fff);
  border:1px solid #dfeceb}
.why .wt{display:block;font-size:11.5px;font-weight:700;color:#4a7a7c;letter-spacing:.02em}
.why .wv{display:block;margin:3px 0 6px;font-size:1.32rem;font-weight:800;
  color:#12333f;line-height:1.35}
.why .wd{margin:0;font-size:12.5px;line-height:1.85;color:#4a606a}
.why::before{content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:#2eb6af;margin-bottom:9px}
.why.rare::before{background:#c9962f}
.why.fast::before{background:#3f8fd0}
.why.up::before{background:#1c9a94}
.why.care::before{background:#8a7fd0}
.why.walk::before{background:#d9836f}
.why.bldg::before{background:#5b8f6a}
.whyend{margin:14px 0 0;padding:13px 16px;border-radius:12px;background:#eef8f7;
  border:1px solid #d2e9e6;font-size:.95rem;line-height:1.8;color:#1d4a4c}

/* ---- ティザー板 (販売中 / 売り出し前) ------------------------------------ */
.teaser h3{margin:16px 0 6px}
.tzsum{margin:0 0 4px;font-size:.95rem;color:#33474f}
.tzsum b{font-size:1.28rem;font-weight:800;color:#0a8079;padding:0 2px}
.tzcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;margin:8px 0 4px}
.tzcard{padding:13px 15px;border-radius:14px;border:1px solid #e2ecea;background:#fff;
  display:flex;flex-direction:column;gap:5px}
.tzcard.pre{background:linear-gradient(180deg,#fffaf0,#fff);border-color:#f0dfbe}
.tzcard .tzspec{font-size:11.5px;color:var(--mut);letter-spacing:.02em}
.tzcard .tzprice{font-size:1.18rem;font-weight:800;color:#12333f}
.tzcard .tzbtn{margin-top:4px;display:block;text-align:center;font-size:12px;
  font-weight:700;padding:8px 10px;border-radius:999px;background:#2eb6af;
  color:#fff;text-decoration:none}
.tzcard .tzbtn:hover{background:#1c9a94;text-decoration:none}
.tzcard.pre .tzbtn{background:#c9962f}
.tzcard.pre .tzbtn:hover{background:#a97c1d}

/* ---- 市場に出る前の訴求 -------------------------------------------------- */
.prelist{background:linear-gradient(180deg,#fffdf6,#fff);border-color:#eee0c2}
.prelist .plmain{margin:0 0 8px;font-size:1rem;line-height:1.85;color:#5b4a24}
.prelist .plmain.on{font-weight:600;color:#493a16}
.prelist .plmain b{font-size:1.5rem;font-weight:800;color:#b06f04;padding:0 3px}
.prelist .plco{margin:0;font-size:.9rem;line-height:1.85;color:#6b5a34}

/* ---- 表を畳む ------------------------------------------------------------ */
details.tdet{margin:10px 0 0}
details.tdet>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--acc-d);
  padding:7px 0;list-style:none}
details.tdet>summary::-webkit-details-marker{display:none}
details.tdet>summary::before{content:"\25b8  "}
details.tdet[open]>summary::before{content:"\25be  "}

/* ---- スマホ -------------------------------------------------------------- */
/* PC: 2カラムの高さを揃える。 図の高さは固定なのに物件概要の行数は棟ごとに違うので、
   余りを図に配って埋める (埋めないと右側だけ伸びて灰色の空白が残る)。 */
@media(min-width:761px){
  .hvis{display:flex;flex-direction:column}
  .hface,.hmap{display:flex;flex-direction:column;min-height:0}
  .hface{flex:1.05 1 0}
  .hmap{flex:1 1 0}
  .hface .hphoto,.hface .svframe{flex:1 1 auto;height:auto;min-height:190px}
  .hface .gsimap,.hmap .gsimap{flex:1 1 auto;min-height:170px;height:100%}
}

@media(max-width:760px){
  .herowrap{grid-template-columns:1fr}
  .gr2{grid-template-columns:1fr;gap:4px}
  .gr2 .grcell.wide{padding-top:2px}
  dl.spec>div{grid-template-columns:5.6em 1fr}
}
@media(max-width:520px){
  .why .wv{font-size:1.2rem}
  .whys{grid-template-columns:1fr}
  .tzcards{grid-template-columns:1fr}
}


/* ---- 階で変わるAI査定レンジ (タワー棟・2026-09-01) -------------------------
   ★SVGにしない。 viewBox固定のSVGはスマホ幅で文字が5pxになって読めない。
   PC/SPで組み替わるグリッドにする (SP は ラベル / バー+金額 の2段)。 */
.bandc{margin:14px 0 0}
.bandc ol.bandrows{list-style:none;margin:0;padding:0}
.bandc ol.bandrows>li,.bandc .bandaxw{
  display:grid;grid-template-columns:5.6em 1fr 8.6em;align-items:center;gap:0 12px}
.bandc ol.bandrows>li{padding:8px 0}
.bandc ol.bandrows>li+li{border-top:1px solid #f0f5f5}
.bandc .bl{text-align:right;line-height:1.22}
.bandc .bl b{display:block;font-size:13.5px;font-weight:700;color:#14242e}
.bandc .bl i{display:block;font-style:normal;font-size:11px;color:#8b9ba1}
.bandc .bbar{position:relative;height:18px;border-radius:9px;background:#f2f7f7}
.bandc .bfill{position:absolute;top:0;height:18px;border-radius:9px;background:#cdeceb}
.bandc li:nth-child(1) .bfill{background:#e4f4f3}
.bandc li:nth-child(2) .bfill{background:#d4eeed}
.bandc li:nth-child(3) .bfill{background:#c0e5e3}
.bandc li:nth-child(4) .bfill{background:#a9dbd8}
.bandc .bdot{position:absolute;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#1c9a94;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(28,154,148,.35)}
.bandc .bv{line-height:1.22;white-space:nowrap}
.bandc .bv b{font-size:14.5px;font-weight:700;color:#12333f}
.bandc .bv small{font-size:11px;color:#12333f;margin-left:1px}
.bandc .bv i{display:block;font-style:normal;font-size:11px;color:#8b9ba1}
.bandc .bandax{position:relative;height:15px;margin-top:5px}
.bandc .bandax i{position:absolute;top:0;font-style:normal;font-size:11px;
  color:#8b9ba1;white-space:nowrap}
@media(max-width:560px){
  .bandc ol.bandrows>li,.bandc .bandaxw{
    grid-template-columns:4.8em 1fr;grid-template-areas:"l b" "l v";gap:2px 10px}
  .bandc .bl{grid-area:l}
  .bandc .bbar{grid-area:b}
  .bandc .bv{grid-area:v}
  .bandc .bv i{display:inline;margin-left:7px}
  .bandc .bandaxw>.bv{display:none}
  .bandc .bandax{grid-area:b}
}

/* ---- 希望価格 → 成約可能性 (タスク#64) ----------------------------------
   ★sell面の1画面目。 スマホ(390px)で「見出し + 入力2つ + ボタン」が
     スクロールなしで入る密度にする。 結果は押してから下に開く。 */
.chance{
  margin:22px 0 26px; padding:20px 20px 18px; border-radius:20px;
  background:linear-gradient(180deg,#fffaf0,#ffffff);
  border:1px solid #f0e0c0; box-shadow:0 6px 18px rgba(32,52,62,.06);
}
.chance h2{margin:0 0 4px; font-size:1.2rem; border:0; padding:0; line-height:1.45}
.chance .csub{margin:0 0 14px; font-size:.85rem; color:#6b8189; line-height:1.65}
.chance .csub strong{color:#12333f}
.cform{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.cform .cin{flex:1 1 150px; min-width:140px}
.cform label{display:block; font-size:.8rem; font-weight:700; color:#28454e; margin:0 0 5px}
.cform .cfield{display:flex; align-items:center; gap:6px;
  background:#fff; border:2px solid #e2ecea; border-radius:13px; padding:0 12px}
.cform .cfield:focus-within{border-color:var(--acc)}
.cform input{flex:1; min-width:0; border:0; outline:0; background:transparent;
  padding:13px 0; font-size:16px; /* 16px未満だとiOSが勝手にズームする */
  font-weight:700; color:#12333f; font-family:inherit}
.cform .cfield span{flex:0 0 auto; font-size:.85rem; color:#6b8189; font-weight:700}
.cform input::-webkit-outer-spin-button,
.cform input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.cform input[type=number]{-moz-appearance:textfield}
.cgo{flex:1 1 100%; margin-top:2px; padding:15px; border:0; border-radius:14px;
  background:linear-gradient(180deg,#ffa338,#f07d10); color:#fff;
  font-size:1.02rem; font-weight:800; letter-spacing:.03em; cursor:pointer;
  font-family:inherit; box-shadow:0 5px 14px rgba(240,125,16,.28)}
.cgo:active{transform:translateY(2px); box-shadow:0 2px 7px rgba(240,125,16,.28)}
.chance .cnote{margin:8px 0 0; font-size:.75rem; color:#8497a0; line-height:1.55}
.cres{margin-top:16px; padding-top:16px; border-top:2px dashed #f0e0c0}
.cverdict{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cbadge{flex:0 0 auto; padding:9px 16px; border-radius:999px;
  font-size:1rem; font-weight:800; color:#fff; background:#8ea3ad}
.cbadge.hi{background:linear-gradient(180deg,#2fc0a5,#0f9c86)}
.cbadge.mid{background:linear-gradient(180deg,#f2b23c,#dd8f10)}
.cbadge.lo{background:linear-gradient(180deg,#e2836b,#c85a3e)}
.cverdict .clead{font-size:.85rem; color:#6b8189; font-weight:700}
.cwhy{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.cwhy li{position:relative; padding-left:20px; font-size:.9rem; line-height:1.65;
  color:#28454e}
.cwhy li:before{content:""; position:absolute; left:4px; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--acc)}
.cwhy b{color:#12333f}
.ckpi{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.ckpi>div{flex:1 1 96px; padding:12px 10px; border-radius:13px; background:#fff;
  border:1px solid #e2ecea; text-align:center}
.ckpi b{display:block; font-size:1.45rem; font-weight:800; color:#12333f;
  line-height:1.2; font-variant-numeric:tabular-nums}
.ckpi b small{font-size:.78rem; font-weight:700; margin-left:1px}
.ckpi span{display:block; margin-top:3px; font-size:.72rem; color:#6b8189;
  line-height:1.45}
.cact{margin-top:16px}
.cact .btn{display:block; text-align:center; padding:16px 18px; border-radius:15px;
  background:linear-gradient(180deg,#16cec0,#0a9d92); color:#fff; font-weight:800;
  font-size:1rem; box-shadow:0 5px 14px rgba(10,157,146,.26)}
.cact .btn:hover{color:#fff; text-decoration:none; filter:brightness(1.04)}
.cact .csecond{margin:10px 0 0; font-size:.83rem; color:#6b8189; line-height:1.7}
.cact .csecond strong{color:#28454e}
@media (max-width:520px){
  .chance{margin:16px 0 20px; padding:16px 15px 15px; border-radius:16px}
  .chance h2{font-size:1.06rem}
  .chance .csub{font-size:.8rem; margin-bottom:11px}
  .cform{gap:8px}
  .cform .cin{flex:1 1 calc(50% - 4px); min-width:0}
  .cgo{padding:14px; font-size:.98rem}
  .ckpi b{font-size:1.25rem}
}

/* 買い手の人数 (#11)。 0人のときは「受付中」の1行だけ */
.cbuyers{margin:0 0 12px; padding:8px 13px; border-radius:10px;
  /* ★白い角丸だと入力欄に見える。 受付中のときは面を敷いて「文」に見せる */
  background:#f2f7f6; border:0; border-left:3px solid #cfe0dd;
  font-size:.83rem; color:#6b8189}
.cbuyers.on{background:#fff6e6; border-left-color:#f0a52a; color:#28454e;
  font-weight:700; font-size:.9rem}
.cbuyers b{font-size:1.35rem; color:#b06f04; padding:0 3px; font-weight:800}
.cbuyers .cbn{display:block; margin-top:3px; font-size:.75rem; font-weight:500;
  color:#96775a; line-height:1.55}
@media (max-width:520px){.cbuyers{font-size:.8rem; padding:8px 12px}}