/* BMK Recommendations v1.0.0 */

.bmk-recommendations{
  width:100%;
  margin:15px 0 18px;
}
.bmk-rec-block{
  width:100%;
  margin:0 0 18px;
}
.bmk-rec-block:last-of-type{
  margin-bottom:0;
}
.bmk-rec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 9px;
}
.bmk-rec-head strong,
.bmk-rec-head span{
  display:block;
}
.bmk-rec-head strong{
  color:#292d29;
  font-size:15px;
  font-weight:820;
  line-height:1.2;
}
.bmk-rec-head span{
  margin-top:2px;
  color:#969c94;
  font-size:8px;
}

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

.bmk-rec-product{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #e7eae5;
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 12px rgba(15,23,42,.025);
  scroll-snap-align:start;
}
.bmk-rec-product-image{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f8f9f7;
  text-decoration:none!important;
}
.bmk-rec-product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8px;
  box-sizing:border-box;
}
.bmk-rec-product-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#a0a69e;
}
.bmk-rec-product-placeholder svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bmk-rec-product-copy{
  min-height:58px;
  padding:7px 8px 4px;
}
.bmk-rec-product-name{
  display:-webkit-box;
  overflow:hidden;
  color:#303530!important;
  font-size:8.6px;
  font-weight:790;
  line-height:1.25;
  text-decoration:none!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.bmk-rec-product-store{
  display:block;
  overflow:hidden;
  margin-top:4px;
  color:#989f96;
  font-size:6.8px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.bmk-rec-product-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  min-height:48px;
  margin-top:auto;
  padding:4px 7px 8px 8px;
}
.bmk-rec-price{
  min-width:0;
}
.bmk-rec-price strong{
  display:block;
  color:#292e29;
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.bmk-rec-price strong small{
  font-size:6.5px;
  font-weight:750;
}
.bmk-rec-price del{
  display:block;
  margin-top:3px;
  color:#a4aaa2;
  font-size:6px;
  line-height:1;
}

.bmk-rec-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}

.bmk-rec-qty{
  position:relative;
  width:34px;
  height:34px;
  overflow:hidden;
  border:1px solid #83b735;
  border-radius:10px;
  background:#83b735;
  transition:width .23s cubic-bezier(.2,.8,.2,1),background .18s ease;
}
.bmk-rec-qty.is-active{
  width:82px;
  background:#fff;
}
.bmk-rec-add{
  position:absolute!important;
  inset:0!important;
  z-index:2!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:inherit!important;
  background:#83b735!important;
  color:#fff!important;
  box-shadow:none!important;
  transition:opacity .13s ease,transform .2s ease!important;
}
.bmk-rec-add svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.bmk-rec-qty.is-active .bmk-rec-add{
  opacity:0!important;
  transform:scale(.55)!important;
  pointer-events:none!important;
}
.bmk-rec-stepper{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:27px 28px 27px;
  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-rec-qty.is-active .bmk-rec-stepper{
  opacity:1;
  transform:scaleX(1);
  pointer-events:auto;
}
.bmk-rec-stepper button{
  display:grid!important;
  place-items:center!important;
  width:27px!important;
  height:32px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#679238!important;
  box-shadow:none!important;
}
.bmk-rec-stepper button svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.bmk-rec-stepper strong{
  display:grid;
  place-items:center;
  width:28px;
  color:#303530;
  font-size:9px;
  font-weight:900;
}
.bmk-rec-qty.is-busy{
  opacity:.65;
  pointer-events:none;
}
.bmk-rec-qty.is-busy:after{
  content:"";
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  margin:-7px 0 0 -7px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:bmk-rec-spin .65s linear infinite;
}
.bmk-rec-qty.is-active.is-busy:after{
  border-color:#dfe8d6;
  border-top-color:#83b735;
}
@keyframes bmk-rec-spin{to{transform:rotate(360deg)}}

.bmk-rec-options{
  display:grid!important;
  place-items:center!important;
  min-height:34px!important;
  padding:0 8px!important;
  border:1px solid #83b735!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#679238!important;
  font-size:6.8px!important;
  font-weight:850!important;
  text-decoration:none!important;
}

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

@media(max-width:360px){
  .bmk-rec-rail{
    grid-auto-columns:120px;
    gap:7px;
  }
}


/* ==========================================================
   BMK Recommendations v1.0.1
   Compact card layout + safe quantity control
   ========================================================== */

/* Slightly shorter cards */
.bmk-rec-rail{
  grid-auto-columns:124px!important;
}

.bmk-rec-product-image{
  aspect-ratio:1 / .86!important;
}

.bmk-rec-product-image img{
  padding:6px!important;
}

.bmk-rec-product-copy{
  min-height:66px!important;
  padding:6px 7px 2px!important;
}

.bmk-rec-product-name{
  font-size:8.3px!important;
  line-height:1.2!important;
}

/* Price now lives directly under the product name */
.bmk-rec-product-copy .bmk-rec-price{
  margin-top:5px!important;
}

.bmk-rec-product-copy .bmk-rec-price strong{
  font-size:10.4px!important;
  line-height:1!important;
}

.bmk-rec-product-copy .bmk-rec-price strong small{
  font-size:6.3px!important;
}

.bmk-rec-product-copy .bmk-rec-price del{
  margin-top:2px!important;
  font-size:5.8px!important;
}

/* Store is a separate third line below price */
.bmk-rec-product-store{
  margin-top:4px!important;
  font-size:6.5px!important;
}

/*
 * Bottom action row owns the full card width.
 * This completely separates the expanded − qty + control from price.
 */
.bmk-rec-product-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-height:38px!important;
  margin-top:auto!important;
  padding:2px 7px 7px!important;
}

.bmk-rec-action{
  width:100%!important;
  display:flex!important;
  justify-content:flex-end!important;
  overflow:visible!important;
}

/* Quantity control expands only inside its own bottom row */
.bmk-rec-qty{
  flex:0 0 auto!important;
  width:32px!important;
  height:32px!important;
}

.bmk-rec-qty.is-active{
  width:80px!important;
}

.bmk-rec-stepper{
  grid-template-columns:26px 28px 26px!important;
}

.bmk-rec-stepper button{
  width:26px!important;
  height:30px!important;
}

.bmk-rec-stepper strong{
  width:28px!important;
  font-size:8.8px!important;
}

.bmk-rec-options{
  min-height:32px!important;
}

/* Narrow phones remain safe */
@media(max-width:360px){
  .bmk-rec-rail{
    grid-auto-columns:116px!important;
  }

  .bmk-rec-qty.is-active{
    width:76px!important;
  }

  .bmk-rec-stepper{
    grid-template-columns:24px 28px 24px!important;
  }

  .bmk-rec-stepper button{
    width:24px!important;
  }
}


/* ==========================================================
   BMK Recommendations v1.0.2
   Edge-to-edge image + ultra compact cards
   ========================================================== */

/* Slightly narrower card, helping fit more content horizontally */
.bmk-rec-rail{
  grid-auto-columns:118px!important;
  gap:7px!important;
}

/* Product image sits edge-to-edge with no internal padding */
.bmk-rec-product-image{
  width:100%!important;
  height:78px!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin:0!important;
  background:#fff!important;
}

.bmk-rec-product-image img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  background:#fff!important;
}

/* Make text area as compact as possible without overlaps */
.bmk-rec-product-copy{
  min-height:59px!important;
  padding:5px 6px 1px!important;
}

.bmk-rec-product-name{
  font-size:8px!important;
  line-height:1.15!important;
  min-height:18px!important;
  max-height:19px!important;
  -webkit-line-clamp:2!important;
}

/* Price directly below title */
.bmk-rec-product-copy .bmk-rec-price{
  margin-top:4px!important;
}

.bmk-rec-product-copy .bmk-rec-price strong{
  font-size:9.8px!important;
  line-height:1!important;
}

.bmk-rec-product-copy .bmk-rec-price strong small{
  font-size:6px!important;
}

.bmk-rec-product-copy .bmk-rec-price del{
  margin-top:1px!important;
  font-size:5.5px!important;
  line-height:1!important;
}

/* Store line stays separate and compact */
.bmk-rec-product-store{
  margin-top:3px!important;
  font-size:6.1px!important;
  line-height:1!important;
}

/* Bottom action row is now minimal */
.bmk-rec-product-bottom{
  min-height:33px!important;
  padding:1px 6px 5px!important;
}

.bmk-rec-action{
  min-height:30px!important;
}

/* Quantity control slightly smaller but still comfortable */
.bmk-rec-qty{
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
}

.bmk-rec-qty.is-active{
  width:74px!important;
}

.bmk-rec-stepper{
  grid-template-columns:24px 26px 24px!important;
}

.bmk-rec-stepper button{
  width:24px!important;
  height:28px!important;
}

.bmk-rec-stepper strong{
  width:26px!important;
  font-size:8.5px!important;
}

.bmk-rec-add svg{
  width:14px!important;
  height:14px!important;
}

.bmk-rec-stepper button svg{
  width:12px!important;
  height:12px!important;
}

.bmk-rec-options{
  min-height:30px!important;
  padding:0 7px!important;
  font-size:6.4px!important;
}

/* Remove any accidental vertical spacing inside product cards */
.bmk-rec-product{
  gap:0!important;
}

/* Very narrow screens */
@media(max-width:360px){
  .bmk-rec-rail{
    grid-auto-columns:112px!important;
    gap:6px!important;
  }

  .bmk-rec-product-image{
    height:74px!important;
  }

  .bmk-rec-product-copy{
    min-height:57px!important;
  }

  .bmk-rec-qty.is-active{
    width:72px!important;
  }

  .bmk-rec-stepper{
    grid-template-columns:23px 26px 23px!important;
  }

  .bmk-rec-stepper button{
    width:23px!important;
  }
}


/* ==========================================================
   BMK Recommendations v1.0.3
   True edge-to-edge images + another 10px less height
   ========================================================== */

/* Force image block to the physical card edges. */
.bmk-rec-product-image{
  position:relative!important;
  display:block!important;
  width:calc(100% + 2px)!important;
  height:68px!important;
  margin:-1px -1px 0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:13px 13px 0 0!important;
  background:#fff!important;
}

/*
 * contain was leaving visible white columns when the source image
 * aspect ratio did not match the card. cover fills the full width.
 */
.bmk-rec-product-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:center!important;
  background:transparent!important;
}

/* Compact the rest without allowing any overlap. */
.bmk-rec-product-copy{
  min-height:56px!important;
  padding:4px 6px 0!important;
}

.bmk-rec-product-name{
  min-height:17px!important;
  max-height:18px!important;
  font-size:7.9px!important;
  line-height:1.12!important;
}

.bmk-rec-product-copy .bmk-rec-price{
  margin-top:3px!important;
}

.bmk-rec-product-store{
  margin-top:2px!important;
}

.bmk-rec-product-bottom{
  min-height:31px!important;
  padding:0 6px 4px!important;
}

.bmk-rec-action{
  min-height:29px!important;
}

.bmk-rec-qty{
  width:29px!important;
  height:29px!important;
}

.bmk-rec-qty.is-active{
  width:73px!important;
}

/* Keep corners clean even with edge-to-edge media. */
.bmk-rec-product{
  overflow:hidden!important;
}

/* Narrow phones: another 10px reduction here as well. */
@media(max-width:360px){
  .bmk-rec-product-image{
    height:64px!important;
  }

  .bmk-rec-product-copy{
    min-height:55px!important;
  }

  .bmk-rec-product-bottom{
    min-height:30px!important;
    padding-bottom:4px!important;
  }
}


/* ==========================================================
   BMK Recommendations v1.0.4
   BISTRO24-style compact product cards
   ========================================================== */

/* Rail: slightly wider cards to preserve readability */
.bmk-rec-rail{
  grid-auto-columns:138px!important;
  gap:10px!important;
  padding:0 2px 6px!important;
}

/* Main card */
.bmk-rec-product{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  overflow:hidden!important;

  border:1px solid rgba(0,0,0,.06)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 2px 12px rgba(0,0,0,.06)!important;
}

/* Square image like the preferred Woodmart cards */
.bmk-rec-product-image{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

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

  margin:-1px -1px 0!important;
  padding:0!important;

  overflow:hidden!important;
  border-radius:17px 17px 0 0!important;
  background:#f7f8f6!important;
}

/* Image fills the whole square, no left/right gaps */
.bmk-rec-product-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;

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

/*
 * Content reserves a fixed lower action area just like the reference.
 * This guarantees that price and expanded quantity control never overlap.
 */
.bmk-rec-product-copy{
  min-height:74px!important;
  padding:7px 9px 42px!important;
}

/* Two-line title */
.bmk-rec-product-name{
  display:-webkit-box!important;
  overflow:hidden!important;

  min-height:31px!important;
  max-height:31px!important;

  color:#1a1a1a!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.35!important;

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

/* Price positioned in the reserved lower zone */
.bmk-rec-product-copy .bmk-rec-price{
  position:absolute!important;
  left:9px!important;
  bottom:12px!important;

  max-width:66px!important;
  margin:0!important;
  padding:0!important;
  z-index:2!important;
}

.bmk-rec-product-copy .bmk-rec-price strong{
  display:block!important;
  overflow:hidden!important;

  color:#159447!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;

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

.bmk-rec-product-copy .bmk-rec-price strong small{
  font-size:7px!important;
  font-weight:700!important;
}

.bmk-rec-product-copy .bmk-rec-price del{
  display:block!important;
  margin:0 0 2px!important;

  color:#bbb!important;
  font-size:7px!important;
  font-weight:400!important;
  line-height:1!important;
}

/* Store shown unobtrusively under title */
.bmk-rec-product-store{
  display:block!important;
  overflow:hidden!important;

  margin-top:3px!important;

  color:#9ca29a!important;
  font-size:6.5px!important;
  line-height:1!important;

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

/*
 * Bottom action no longer consumes vertical height.
 * It occupies the same reserved area as price, but on the right.
 */
.bmk-rec-product-bottom{
  position:absolute!important;
  right:8px!important;
  bottom:8px!important;

  display:block!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;

  z-index:3!important;
}

.bmk-rec-action{
  display:block!important;
  width:auto!important;
  min-height:0!important;
  overflow:visible!important;
}

/* Shopping bag button */
.bmk-rec-qty{
  position:relative!important;

  width:36px!important;
  height:36px!important;

  overflow:hidden!important;

  border:0!important;
  border-radius:12px!important;
  background:#35a915!important;

  box-shadow:0 3px 10px rgba(53,169,21,.32)!important;

  transition:
    width .24s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    box-shadow .18s ease!important;
}

/* Expanded quantity control grows to the LEFT */
.bmk-rec-qty.is-active{
  width:88px!important;
  background:#fff!important;
  border:1px solid #35a915!important;
  box-shadow:0 3px 10px rgba(53,169,21,.14)!important;
}

.bmk-rec-add{
  border-radius:12px!important;
  background:#35a915!important;
}

.bmk-rec-add:hover{
  background:#2d9212!important;
}

.bmk-rec-add svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Quantity stepper inside expanded control */
.bmk-rec-stepper{
  grid-template-columns:28px 30px 28px!important;
}

.bmk-rec-stepper button{
  width:28px!important;
  height:34px!important;
  color:#2d9212!important;
}

.bmk-rec-stepper strong{
  width:30px!important;
  font-size:9px!important;
  color:#1a1a1a!important;
}

.bmk-rec-stepper button svg{
  width:13px!important;
  height:13px!important;
}

/* Options button matches same visual family */
.bmk-rec-options{
  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;

  box-shadow:0 3px 10px rgba(53,169,21,.28)!important;
}

/* Busy state remains visible on green/white control */
.bmk-rec-qty.is-busy:after{
  width:13px!important;
  height:13px!important;
  margin:-7px 0 0 -7px!important;
}

.bmk-rec-qty.is-active.is-busy:after{
  border-color:#dcead7!important;
  border-top-color:#35a915!important;
}

/* Slightly smaller cards on very narrow phones */
@media(max-width:360px){
  .bmk-rec-rail{
    grid-auto-columns:130px!important;
    gap:8px!important;
  }

  .bmk-rec-product-name{
    font-size:10.5px!important;
  }

  .bmk-rec-product-copy .bmk-rec-price strong{
    font-size:12.5px!important;
  }

  .bmk-rec-qty.is-active{
    width:84px!important;
  }

  .bmk-rec-stepper{
    grid-template-columns:27px 30px 27px!important;
  }
}


/* ==========================================================
   BMK Recommendations v1.0.5
   Auto-collapse quantity control
   ========================================================== */

/*
 * Active + collapsed:
 * quantity remains in cart, but the control returns to compact button.
 */
.bmk-rec-qty.is-active.is-collapsed{
  width:36px!important;
  border:0!important;
  background:#35a915!important;
  box-shadow:0 3px 10px rgba(53,169,21,.32)!important;
}

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

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

/* Quantity badge on collapsed cart button */
.bmk-rec-qty-badge{
  position:absolute!important;
  top:-3px!important;
  right:-3px!important;

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

  min-width:16px!important;
  height:16px!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-sizing:border-box!important;
  box-shadow:0 2px 5px rgba(0,0,0,.14)!important;
}

.bmk-rec-qty-badge[hidden]{
  display:none!important;
}

/* Badge should only be visible while active control is collapsed */
.bmk-rec-qty.is-active:not(.is-collapsed) .bmk-rec-qty-badge{
  opacity:0!important;
  transform:scale(.65)!important;
}

.bmk-rec-qty.is-active.is-collapsed .bmk-rec-qty-badge{
  opacity:1!important;
  transform:scale(1)!important;
  transition:opacity .15s ease,transform .18s ease!important;
}


/* ==========================================================
   BMK Recommendations v1.0.6
   Quantity badge above compact button
   ========================================================== */

/* Allow the badge to extend beyond the compact control. */
.bmk-rec-qty.is-active.is-collapsed{
  overflow:visible!important;
}

.bmk-rec-qty.is-active.is-collapsed .bmk-rec-add{
  overflow:visible!important;
}

/* Notification-style badge in the top-right corner. */
.bmk-rec-qty-badge{
  top:-7px!important;
  right:-7px!important;
  z-index:20!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;
}

/* Keep badge fully visible inside product card at right edge. */
.bmk-rec-product-bottom{
  right:10px!important;
  bottom:9px!important;
}