.browse .row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-left:-12px;
  margin-right:-12px;
}

.browse .card-container{
  box-sizing:border-box;
  padding-left:12px;
  padding-right:12px;
  margin-bottom:24px;
  flex:0 0 25%;
  max-width:25%;
}

.browse .card-container .card{
  height:100%;
}

@media (max-width: 991.98px){
  .browse .card-container{
    flex:0 0 33.3333%;
    max-width:33.3333%;
  }
}

@media (max-width: 767.98px){
  .browse .card-container{
    flex:0 0 50%;
    max-width:50%;
  }
}

@media (max-width: 575.98px){
  .browse .card-container{
    flex:0 0 100%;
    max-width:100%;
  }
}

.browse-search-wrap{
  display:flex;
  justify-content:center;
}

.browse-search-bar{
  width:100%;
  max-width:900px;
  min-height:64px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:32px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  padding:8px 10px 8px 24px;
  gap:10px;
  transition:box-shadow .2s ease, border-color .2s ease;
}

.browse-search-bar:focus-within{
  border-color:rgba(0,0,0,.14);
  box-shadow:0 12px 36px rgba(0,0,0,.12);
}

.browse-search-input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-size:1.05rem;
  color:#222;
  padding:10px 0;
}

.browse-search-input::placeholder{
  color:#8a8f98;
}

.browse-search-btn{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#6c757d;
  transition:background .2s ease, color .2s ease;
}

.browse-search-btn:hover{
  background:#f3f4f6;
  color:#111;
}

.browse-submit-btn{
  background:#111827;
  color:#fff;
}

.browse-submit-btn:hover{
  background:#000;
  color:#fff;
}

@media (max-width: 576px){
  .browse-search-bar{
    min-height:58px;
    padding:6px 8px 6px 18px;
    border-radius:28px;
  }

  .browse-search-input{
    font-size:.98rem;
  }

  .browse-search-btn{
    width:40px;
    height:40px;
  }
}

.card-hidden-base,
.card-hidden-search,
.card-hidden-final{
  display:none !important;
}

/* 360 preview */
.browse .img-hover{
  position:relative;
  display:block;
  overflow:hidden;
}

.browse .card-img-top{
  display:block;
  width:100%;
}

.pano-preview-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:6;

  width:34px;
  height:34px;
  border-radius:50%;

  background:rgba(17,24,39,.55);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 4px 14px rgba(0,0,0,.18);
  backdrop-filter:blur(2px);

  opacity:0;
  transform:scale(.9);
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
  pointer-events:none;
}

/* show only on hover */
.img-hover:hover .pano-preview-badge{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.pano-preview-badge:hover{
  background:rgba(17,24,39,.75);
}

.pano-preview-layer{
  position:absolute;
  inset:0;
  z-index:4;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.pano-preview-layer canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

.img-hover .card-img-top,
.img-hover .caption{
  transition:opacity .22s ease;
}

.img-hover.preview-active .card-img-top,
.img-hover.preview-active .caption{
  opacity:0;
}

.img-hover.preview-active .pano-preview-layer{
  opacity:1;
  visibility:visible;
}

/* caption improvements */
.browse .caption{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  /* -webkit-line-clamp:3;   dotted/truncated title */
   /* text-overflow:ellipsis; */
  overflow:hidden;
  max-height:68%;
  line-height:1.35;
}

.browse-reset-btn{
  color:#6c757d;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.browse-reset-btn:hover{
  background:#f3f4f6;
  color:#111;
}

.browse-search-bar.has-value .browse-reset-btn{
  opacity:1;
  pointer-events:auto;
}

/* Thumb hover scaling */
.browse .img-hover .card-img-top{
  transition:transform .45s ease, filter .3s ease, opacity .22s ease;
  transform:scale(1);
}
.browse .img-hover:hover .card-img-top{
  transform:scale(1.05);
  filter:brightness(1.02);
}