/* Terry.ism v29 — selectable portrait and landscape sample library */

.sample-demo-bar{display:grid!important;gap:9px!important}
.sample-library{
  overflow:hidden;
  border:1px solid #e3e5e7;
  border-radius:12px;
  background:#fff;
}
.sample-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:7px 10px;
  border-bottom:1px solid #eceeef;
}
.sample-library-head strong{font-size:12px;color:#242a31;letter-spacing:-.02em}
.sample-library-head span{font-size:10px;font-weight:700;color:#7c848d;white-space:nowrap}
.sample-library-track{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  padding:8px;
}
.sample-choice{
  display:grid;
  min-width:0;
  gap:6px;
  padding:6px;
  border:1px solid #e1e4e7;
  border-radius:9px;
  background:#fff;
  color:#1f252c;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.sample-choice:hover{border-color:#aeb6be;box-shadow:0 7px 18px rgba(22,28,35,.08);transform:translateY(-1px)}
.sample-choice:focus-visible{outline:2px solid #d47b43;outline-offset:2px}
.sample-choice-thumb{
  display:grid;
  height:100px;
  place-items:center;
  overflow:hidden;
  border-radius:6px;
  background:linear-gradient(145deg,#eef0ef,#f8f8f7);
}
.sample-choice-thumb img{display:block;object-fit:cover;box-shadow:0 3px 10px rgba(20,25,31,.14)}
.sample-choice[data-orientation="portrait"] .sample-choice-thumb img{width:70%;height:100%}
.sample-choice[data-orientation="landscape"] .sample-choice-thumb img{width:100%;height:72%}
.sample-choice-copy{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:5px}
.sample-choice-copy b{min-width:0;overflow:hidden;font-size:10.5px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.sample-choice-copy em{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:#f0f2f3;
  color:#6f7780;
  font-size:8px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}

@media(max-width:720px){
  .sample-library-head{min-height:32px;padding:6px 9px}
  .sample-library-track{
    display:flex;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .sample-library-track::-webkit-scrollbar{display:none}
  .sample-choice{flex:0 0 126px;scroll-snap-align:start}
  .sample-choice-thumb{height:92px}
  .sample-choice-copy b{font-size:10px}
}

@media(max-width:360px){
  .sample-choice{flex-basis:116px}
  .sample-choice-thumb{height:86px}
}