.sbf-wrap { max-width: 1020px; margin: 0 auto; }
.sbf-bar { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.sbf-tabs { display:inline-flex; border:1px solid rgba(0,0,0,.18); border-radius: 14px; overflow:hidden; }
.sbf-tab { padding: 10px 12px; background: transparent; border: 0; cursor:pointer; font-size: 14px; }
.sbf-tab.is-active { background: rgba(0,0,0,.06); font-weight: 600; }
.sbf-input { flex: 1 1 340px; padding: 14px 16px; font-size: 18px; border-radius: 14px; border: 1px solid rgba(0,0,0,.18); }
.sbf-btn { padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(0,0,0,.18); background: transparent; cursor: pointer; font-size: 16px; }
.sbf-meta { margin-top: 8px; font-size: 13px; opacity: .75; }
.sbf-results { margin-top: 18px; display:flex; flex-direction: column; gap: 12px; }

.sbf-card {
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 18px;
  padding: 14px;
  display:grid;
  grid-template-columns: 160px 1fr 112px;
  gap: 14px;
  align-items:center;
}

.sbf-left { display:flex; flex-direction: column; gap: 10px; align-items:flex-start; }
.sbf-thumb {
  width: 156px;
  height: 156px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  cursor: pointer;
}

.sbf-photo-count { font-size: 12px; opacity: .8; }

.sbf-body h3 { margin: 0 0 8px 0; font-size: 22px; line-height: 1.15; }
.sbf-sub { font-size: 14px; opacity:.92; margin-top: 2px; }
.sbf-sub .sbf-line { display:block; margin-top: 3px; }
.sbf-binlink { text-decoration: underline; cursor:pointer; }

.sbf-notes { margin-top: 10px; font-size: 13px; opacity:.9; white-space: pre-wrap; }

.sbf-right {
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 10px;
}

.sbf-shelf-big {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  font-weight: 800;
  background: rgba(0,0,0,.03);
}

.sbf-icons { display:flex; gap: 10px; }
.sbf-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.7);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding: 0;
}
.sbf-iconbtn:hover { background: rgba(255,255,255,.95); }
.sbf-iconbtn svg { width: 22px; height: 22px; opacity: .88; }

.sbf-bin-items { margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(0,0,0,.18); display:none; }
.sbf-bin-items ul { margin: 8px 0 0; padding-left: 18px; }
.sbf-bin-items .sbf-muted { opacity:.75; font-size: 12px; }

@media (max-width: 860px){
  .sbf-card { grid-template-columns: 140px 1fr 100px; }
  .sbf-thumb { width: 136px; height: 136px; }
  .sbf-shelf-big { width: 80px; height: 80px; font-size: 30px; }
}

@media (max-width: 620px){
  .sbf-card { grid-template-columns: 1fr; }
  .sbf-right { align-items:flex-start; flex-direction: row; justify-content: space-between; }
  .sbf-shelf-big { width: 76px; height: 76px; font-size: 28px; }
  .sbf-left { flex-direction: row; align-items:center; }
  .sbf-thumb { width: 140px; height: 140px; }
}

.sbf-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding: 20px; z-index: 9999; }
.sbf-modal-inner { max-width: 980px; width: 100%; background: #fff; border-radius: 18px; padding: 12px; }
.sbf-modal-inner img { width: 100%; height: auto; border-radius: 12px; }
.sbf-modal-controls{ display:flex; justify-content:space-between; gap:10px; margin-top: 10px; }
.sbf-modal-controls button{ padding: 10px 14px; border-radius: 12px; border:1px solid rgba(0,0,0,.18); background: transparent; cursor:pointer; }


/* Shelf badge */
.sbf-shelf-big{background: rgba(70,160,95,.28); border:1px solid rgba(70,160,95,.35);} 
.sbf-shelf-label{font-size:11px; opacity:.75; line-height:1; margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em;} 
.sbf-shelf-num{font-size:26px; font-weight:800; line-height:1;} 


/* Layout tweaks */
.sbf-card{align-items:flex-start;}
.sbf-mid{align-items:flex-start;}
.sbf-title{margin-top:0;}


/* Shelf badge vertical fix */
.sbf-shelf-big{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.sbf-shelf-label{display:block; margin-bottom:6px;}
.sbf-shelf-num{font-size:32px; font-weight:800;}


.sbf-section-header{font-weight:700; letter-spacing:0.08em; font-size:12px; opacity:0.7; margin:18px 2px 8px;}


.sbf-shelf-big-na{background:#b00020 !important;}
.sbf-shelf-big-na .sbf-shelf-label, .sbf-shelf-big-na .sbf-shelf-num{color:#fff !important;}


.sbf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sbf-heading{font-size:18px;font-weight:700;}
.sbf-tabs{display:flex;gap:8px;}
.sbf-tab{border:1px solid rgba(0,0,0,0.15);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;}
.sbf-tab.is-active{background:rgba(0,0,0,0.06);}
.sbf-load-more{margin-top:12px;width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.15);background:#fff;cursor:pointer;}


.sbf-toplinks{display:flex;gap:12px;align-items:center;font-size:13px;}
.sbf-link{color:inherit;text-decoration:none;opacity:0.75;}
.sbf-link.is-active{opacity:1;font-weight:700;text-decoration:underline;}
/* In list views, hide search bar area */
.sbf-list-view .sbf-bar{display:none;}

/* =========================================================
   MOBILE DENSITY (single-column compact cards)
   Goal: show more results per screen without changing logic
   ========================================================= */

@media (max-width: 620px){
  /* tighter overall spacing */
  .sbf-wrap{padding:16px 14px;}
  .sbf-results{margin-top:12px;gap:10px;}
  .sbf-section-title{margin:14px 0 10px;}

  /* smaller search bar */
  .sbf-search-row{gap:10px;}
  .sbf-input{height:52px;padding:12px 16px;border-radius:16px;}
  .sbf-input .sbf-ico{left:14px;font-size:18px;}
  .sbf-input input{padding-left:44px;font-size:18px;}
  .sbf-input button.sbf-clear{right:10px;width:38px;height:38px;font-size:20px;}

  /* compact card layout: enforce flex row to prevent text wrapping weirdness */
  .sbf-card{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 12px;
    border-radius:18px;
  }
  .sbf-card .sbf-left{display:flex;align-items:center;gap:12px;min-width:0;}
  .sbf-thumb{width:56px;height:56px;border-radius:14px;flex:0 0 56px;}

  .sbf-card .sbf-body{min-width:0;}
  .sbf-card h3{
    font-size:18px;
    line-height:1.15;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .sbf-card .sbf-sub{margin-top:4px;font-size:13px;}

  /* shelf pill: a bit larger, but inline and compact */
  .sbf-card .sbf-right{display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .sbf-shelf-pill{
    width:72px;
    height:72px;
    border-radius:18px;
    padding:0;
  }
  .sbf-shelf-pill .sbf-shelf-label{font-size:12px;letter-spacing:.08em;}
  .sbf-shelf-pill .sbf-shelf-code{font-size:28px;line-height:1;}

  /* accordion details: keep hidden by default, but tighter when opened */
  .sbf-acc{margin-top:10px;}
  .sbf-acc .sbf-acc-row{padding:6px 0;}
  .sbf-acc .sbf-acc-row .k{min-width:72px;}
}