/* BMK Store Showcase v1.0.0 */

.bmk-store-showcase{
  width:100%;
  margin:17px 0 20px;
}
.bmk-show-section{
  width:100%;
  margin:0 0 20px;
}
.bmk-show-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 9px;
}
.bmk-show-head-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.bmk-show-store-logo{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  overflow:hidden;
  border-radius:9px;
  background:#fff;
  color:#679238;
  font-size:12px;
  font-weight:900;
}
.bmk-show-store-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:2px;
  box-sizing:border-box;
}
.bmk-show-store-copy{
  min-width:0;
}
.bmk-show-store-copy strong,
.bmk-show-store-copy small{
  display:block;
}
.bmk-show-store-copy strong{
  overflow:hidden;
  color:#292d29;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.bmk-show-store-copy small{
  display:flex!important;
  align-items:center;
  gap:4px;
  margin-top:2px;
  color:#679238;
  font-size:6.8px;
  font-weight:750;
}
.bmk-show-store-copy small i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#83b735;
}
.bmk-show-store-copy small.is-closed{
  color:#927c7c;
}
.bmk-show-store-copy small.is-closed i{
  background:#a7aaa6;
}

.bmk-show-all{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  min-height:30px!important;
  padding:0 8px!important;
  border:1px solid #e2e6df!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#697067!important;
  font:inherit!important;
  font-size:7.2px!important;
  font-weight:800!important;
  text-transform:none!important;
  box-shadow:none!important;
}
.bmk-show-all span{
  font-size:14px;
  line-height:1;
}

.bmk-show-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:138px;
  gap:10px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 2px 6px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.bmk-show-rail::-webkit-scrollbar{display:none}

.bmk-show-product{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  scroll-snap-align:start;
}
.bmk-show-image{
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% + 2px);
  aspect-ratio:1/1;
  margin:-1px -1px 0;
  overflow:hidden;
  border-radius:17px 17px 0 0;
  background:#f7f8f6;
}
.bmk-show-image img{
  width:100%;
  height:100%;
  max-width:none;
  padding:0;
  margin:0;
  object-fit:cover;
  object-position:center;
}
.bmk-show-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#a0a69e;
}
.bmk-show-placeholder svg{
  width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;
}

.bmk-show-copy{
  min-height:73px;
  padding:7px 9px 42px;
}
.bmk-show-name{
  display:-webkit-box;
  overflow:hidden;
  min-height:31px;
  max-height:31px;
  color:#1a1a1a!important;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.bmk-show-price{
  position:absolute;
  left:9px;
  bottom:12px;
  max-width:66px;
}
.bmk-show-price strong{
  display:block;
  overflow:hidden;
  color:#159447;
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.bmk-show-price strong small{
  font-size:7px;
  font-weight:700;
}
.bmk-show-price del{
  display:block;
  margin:0 0 2px;
  color:#bbb;
  font-size:7px;
  font-weight:400;
  line-height:1;
}

.bmk-show-bottom{
  position:absolute;
  right:10px;
  bottom:9px;
  z-index:3;
}
.bmk-show-qty{
  position:relative;
  width:36px;
  height:36px;
  overflow:hidden;
  border-radius:12px;
  background:#35a915;
  box-shadow:0 3px 10px rgba(53,169,21,.32);
  transition:width .24s cubic-bezier(.2,.8,.2,1),background .18s ease;
}
.bmk-show-qty.is-active{
  width:88px;
  border:1px solid #35a915;
  background:#fff;
}
.bmk-show-qty.is-active.is-collapsed{
  width:36px;
  overflow:visible;
  border:0;
  background:#35a915;
}
.bmk-show-add{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  background:#35a915!important;
  color:#fff!important;
  box-shadow:none!important;
  transition:opacity .13s ease,transform .2s ease!important;
}
.bmk-show-add svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bmk-show-qty.is-active .bmk-show-add{
  opacity:0!important;
  transform:scale(.55)!important;
  pointer-events:none!important;
}
.bmk-show-qty.is-active.is-collapsed .bmk-show-add{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
  overflow:visible!important;
}
.bmk-show-stepper{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:28px 30px 28px;
  align-items:center;
  opacity:0;
  transform:scaleX(.65);
  pointer-events:none;
  transition:opacity .13s ease .04s,transform .23s cubic-bezier(.2,.8,.2,1);
}
.bmk-show-qty.is-active .bmk-show-stepper{
  opacity:1;
  transform:scaleX(1);
  pointer-events:auto;
}
.bmk-show-qty.is-active.is-collapsed .bmk-show-stepper{
  opacity:0;
  transform:scaleX(.65);
  pointer-events:none;
}
.bmk-show-stepper button{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:34px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#2d9212!important;
  box-shadow:none!important;
}
.bmk-show-stepper button svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
}
.bmk-show-stepper strong{
  display:grid;
  place-items:center;
  width:30px;
  color:#1a1a1a;
  font-size:9px;
  font-weight:900;
}
.bmk-show-badge{
  position:absolute!important;
  top:-7px!important;
  right:-7px!important;
  z-index:20!important;
  display:grid!important;
  place-items:center!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 4px!important;
  border:2px solid #fff!important;
  border-radius:99px!important;
  background:#159447!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 2px 7px rgba(0,0,0,.18)!important;
}
.bmk-show-badge[hidden]{display:none!important}
.bmk-show-qty.is-active:not(.is-collapsed) .bmk-show-badge{
  opacity:0;
}
.bmk-show-qty.is-busy{
  pointer-events:none;
  opacity:.66;
}
.bmk-show-options{
  display:grid!important;
  place-items:center!important;
  min-height:36px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:12px!important;
  background:#35a915!important;
  color:#fff!important;
  font-size:6.7px!important;
  font-weight:800!important;
  text-decoration:none!important;
}

.bmk-show-toast{
  position:fixed;
  z-index:100250;
  left:50%;
  bottom:85px;
  max-width:82vw;
  transform:translate(-50%,14px);
  padding:8px 11px;
  border-radius:10px;
  background:#30362f;
  color:#fff;
  font-size:8px;
  font-weight:750;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.bmk-show-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:360px){
  .bmk-show-rail{
    grid-auto-columns:130px;
    gap:8px;
  }
  .bmk-show-name{font-size:10.5px}
  .bmk-show-price strong{font-size:12.5px}
  .bmk-show-qty.is-active{width:84px}
}