/* BMK Product Collections v1.0.8 */

.bmk-product-collection,
.bmk-product-collection *{
  box-sizing:border-box;
}

.bmk-product-collection{
  position:relative;
  width:100%;
  margin:0;
}

.bmk-pc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin:0 2px 9px;
}

.bmk-pc-head strong{
  color:#292d29;
  font-size:14px;
  font-weight:850;
  line-height:1.2;
}

.bmk-pc-title{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.bmk-pc-title-icon{
  display:block;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  padding:0;
  object-fit:contain;
}

.bmk-pc-cta{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;

  flex:0 0 auto;

  min-height:30px!important;
  padding:0 8px!important;

  border:1px solid #e2e6df!important;
  border-radius:9px!important;

  background:#fff!important;
  color:#697067!important;

  font-size:7.2px!important;
  font-weight:800!important;
  line-height:1!important;

  text-decoration:none!important;
}

.bmk-pc-cta span{
  font-size:14px;
  line-height:1;
}

/* Carousel */
.bmk-product-collection.is-carousel .bmk-pc-products{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--bmk-pc-basis-mobile,calc(50% - 5px));
  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-product-collection.is-carousel .bmk-pc-products::-webkit-scrollbar{
  display:none;
}

/* Grid */
.bmk-product-collection.is-grid .bmk-pc-products{
  display:grid;
  grid-template-columns:repeat(var(--bmk-pc-cols-mobile,2),minmax(0,1fr));
  gap:10px;

  width:100%;
}

/* Product card */
.bmk-pc-product{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;

  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-pc-image{
  display:block;

  width:calc(100% + 2px);
  aspect-ratio:1/1;

  margin:-1px -1px 0;

  overflow:hidden;

  border-radius:17px 17px 0 0;

  background:#f7f8f6;
}

.bmk-pc-image img{
  display:block;

  width:100%;
  height:100%;
  max-width:none;

  margin:0;
  padding:0;

  object-fit:cover;
  object-position:center;
}

.bmk-pc-copy{
  position:relative;

  min-height:89px;

  padding:7px 9px 42px;
}

.bmk-pc-name{
  display:-webkit-box;

  overflow:hidden;

  min-height:29px;
  max-height:29px;

  color:#1a1a1a!important;

  font-size:10.7px;
  font-weight:600;
  line-height:1.35;

  text-decoration:none!important;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.bmk-pc-store{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;

  min-width:0;

  margin-top:4px;

  overflow:hidden;

  color:#9a9f97!important;

  font-size:var(--bmk-pc-store-font-size,8px)!important;
  font-weight:600!important;
  line-height:1.15!important;

  text-decoration:none!important;
  white-space:nowrap;
}

.bmk-pc-store-name{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bmk-pc-store-arrow{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  flex:0 0 auto;

  width:.8em;
  height:1em;
  margin:0!important;
  padding:0!important;

  color:#83b735;
  font-size:1.45em;
  line-height:1!important;
}

.bmk-pc-price{
  position:absolute;
  left:9px;
  bottom:14px;

  max-width:69px;
}

.bmk-pc-price del{
  display:block;

  margin:0 0 3px;

  color:#bbb;

  font-size:6.6px;
  font-weight:400;
  line-height:1;
}

.bmk-pc-price strong{
  display:block;

  overflow:hidden;

  color:#159447;

  font-size:12.8px;
  font-weight:850;
  line-height:1;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.bmk-pc-price strong small{
  font-size:6.8px;
  font-weight:700;
}

.bmk-pc-bottom{
  position:absolute;
  right:10px;
  bottom:9px;
  z-index:3;
}

/* Quantity control */
.bmk-pc-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-pc-qty.is-active{
  width:88px;

  border:1px solid #35a915;

  background:#fff;
}

.bmk-pc-qty.is-active.is-collapsed{
  width:36px;
  overflow:visible;
  border:0;
  background:#35a915;
}

.bmk-pc-add{
  position:absolute!important;
  inset:0!important;

  display:grid!important;
  place-items:center!important;

  width:100%!important;
  height:100%!important;
  min-height:0!important;

  margin: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-pc-add svg{
  width:19px;
  height:19px;

  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bmk-pc-qty.is-active .bmk-pc-add{
  opacity:0!important;
  transform:scale(.55)!important;
  pointer-events:none!important;
}

.bmk-pc-qty.is-active.is-collapsed .bmk-pc-add{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
  overflow:visible!important;
}

.bmk-pc-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-pc-qty.is-active .bmk-pc-stepper{
  opacity:1;
  transform:scaleX(1);
  pointer-events:auto;
}

.bmk-pc-qty.is-active.is-collapsed .bmk-pc-stepper{
  opacity:0;
  transform:scaleX(.65);
  pointer-events:none;
}

.bmk-pc-stepper button{
  display:grid!important;
  place-items:center!important;

  width:28px!important;
  height:34px!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  border:0!important;

  background:transparent!important;
  color:#2d9212!important;

  box-shadow:none!important;
}

.bmk-pc-stepper button svg{
  width:13px;
  height:13px;

  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

.bmk-pc-stepper strong{
  display:grid;
  place-items:center;

  width:30px;

  color:#1a1a1a;

  font-size:9px;
  font-weight:900;
}

.bmk-pc-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-pc-badge[hidden]{
  display:none!important;
}

.bmk-pc-qty.is-active:not(.is-collapsed) .bmk-pc-badge{
  opacity:0;
}

.bmk-pc-qty.is-busy{
  pointer-events:none;
  opacity:.66;
}

.bmk-pc-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.5px!important;
  font-weight:800!important;

  text-decoration:none!important;
}

.bmk-pc-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-pc-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:360px){
  .bmk-product-collection.is-carousel .bmk-pc-products{
    gap:10px;
  }

  .bmk-pc-name{
    font-size:10.2px;
  }

  .bmk-pc-price strong{
    font-size:12px;
  }

  .bmk-pc-qty.is-active{
    width:84px;
  }
}


/* ==========================================================
   BMK Product Collections v1.0.1
   User-selectable responsive columns
   ========================================================== */

@media(min-width:768px){
  .bmk-product-collection.is-carousel .bmk-pc-products{
    grid-auto-columns:var(--bmk-pc-basis-desktop,calc(20% - 8px))!important;
  }

  .bmk-product-collection.is-grid .bmk-pc-products{
    grid-template-columns:repeat(var(--bmk-pc-cols-desktop,5),minmax(0,1fr))!important;
  }
}


/* ==========================================================
   BMK Product Collections v1.0.2
   Fractional visible columns: 1.5 / 2.5 / 3.5 / etc.
   ========================================================== */

/*
 * Carousel already supports fractional card counts through grid-auto-columns.
 * For grid mode, CSS repeat() requires an integer. When the administrator
 * selects x.5 columns, switch that viewport to a horizontal scroll layout
 * so the next half-card is visible naturally.
 */
@media(max-width:767px){
  .bmk-product-collection.is-grid.has-fractional-mobile .bmk-pc-products{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:var(--bmk-pc-basis-mobile)!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;

    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .bmk-product-collection.is-grid.has-fractional-mobile .bmk-pc-products::-webkit-scrollbar{
    display:none!important;
  }

  .bmk-product-collection.is-grid.has-fractional-mobile .bmk-pc-product{
    scroll-snap-align:start!important;
  }
}

@media(min-width:768px){
  .bmk-product-collection.is-grid.has-fractional-desktop .bmk-pc-products{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:var(--bmk-pc-basis-desktop)!important;

    overflow-x:auto!important;
    overflow-y:hidden!important;

    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
  }

  .bmk-product-collection.is-grid.has-fractional-desktop .bmk-pc-products::-webkit-scrollbar{
    display:none!important;
  }

  .bmk-product-collection.is-grid.has-fractional-desktop .bmk-pc-product{
    scroll-snap-align:start!important;
  }
}


/* ==========================================================
   BMK Product Collections v1.0.4
   Prevent image/card flash during page reload
   ========================================================== */

/*
 * These rules duplicate the critical geometry intentionally.
 * Together with early stylesheet loading and inline img dimensions,
 * they prevent product images from ever rendering at natural size.
 */
.bmk-product-collection .bmk-pc-product{
  position:relative!important;
  overflow:hidden!important;
  min-width:0!important;
  max-width:100%!important;
}

.bmk-product-collection .bmk-pc-image{
  display:block!important;

  width:100%!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;

  overflow:hidden!important;
}

.bmk-product-collection .bmk-pc-image img{
  display:block!important;

  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;

  aspect-ratio:1/1!important;

  object-fit:cover!important;
  object-position:center!important;
}

/* Prevent any theme rule from making collection images viewport-sized. */
.bmk-product-collection img{
  max-width:100%!important;
}
