/* =========================================================
   Yocan FBT (match Pills arrows: overflow-only + blur + icon 22px)
========================================================= */
.yocan-fbt{
  --btn:44px;            /* arrow size */
  --btnEdge:6px;         /* left/right edge */
  --trackPadY:10px;      /* track padding-top/bottom */
  --slideW:180px;        /* desktop slide width (must match .slider-grid__slide width) */

  margin:18px 0 !important;
  font-family:"Geist", sans-serif !important;
  font-weight:300 !important;
  font-style:normal !important;
  color:#111 !important;
  position:relative !important;
}

.yocan-fbt .product-related-products-block__title{
  margin:0 0 12px !important;
  font-size:16px !important;
  letter-spacing:.1px !important;
  text-transform:none !important;
  font-family:"Figtree", sans-serif !important;
  font-optical-sizing:auto !important;
  font-weight:600 !important;
  font-style:normal !important;
  color:#000 !important;
}

.yocan-fbt .yocan-fbt-viewport{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
}

/* Scroller */
.yocan-fbt .slider-grid-track{
  display:flex !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;

  padding:var(--trackPadY) 0 !important;
  margin:0 !important;

  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;

  /* hide scrollbar but keep scroll */
  -ms-overflow-style:none !important;
  scrollbar-width:none !important;
}
.yocan-fbt .slider-grid-track::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Slide */
.yocan-fbt .slider-grid__slide{
  flex:0 0 auto !important;
  width:var(--slideW) !important;
  scroll-snap-align:start !important;
}

/* Card */
.yocan-fbt .vertical-product-card{ display:block !important; background:#fff !important; }

.yocan-fbt .vertical-product-card__inner{
  position:relative !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#f6f6f6 !important;
  aspect-ratio:1/1 !important;
}

.yocan-fbt .vertical-product-card__link{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
}

.yocan-fbt .vertical-product-card__image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transform:scale(1) !important;
  transition:transform .35s ease !important;
}
.yocan-fbt .slider-grid__slide:hover .vertical-product-card__image{
  transform:scale(1.03) !important;
}

/* Add button on card */
.yocan-fbt .vertical-product-card__buttons{
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  z-index:3 !important;
  opacity:0 !important;
  transform:translateY(6px) !important;
  transition:opacity .25s ease, transform .25s ease !important;
  pointer-events:none !important;
}
.yocan-fbt .slider-grid__slide:hover .vertical-product-card__buttons{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

.yocan-fbt .yocan-fbt-add{
  width:38px !important;
  height:38px !important;
  border-radius:8px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#000 !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
}
.yocan-fbt .yocan-fbt-add svg{
  width:18px !important;
  height:18px !important;
  color:#fff !important;
}

/* Title + price */
.yocan-fbt .vertical-product-card__info{ padding:10px 2px 0 !important; }

.yocan-fbt .vertical-product-card__title{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-decoration:none !important;
  color:#111 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}
.yocan-fbt .vertical-product-card__price{
  margin-top:6px !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* =========================================================
   Arrow buttons: match Pills (blur + icon 22px) + overflow-only
   Show only when .yocan-fbt.has-overflow exists (JS toggles)
========================================================= */
.yocan-fbt .yocan-fbt-btn{
  position:absolute !important;

  /* ✅ center to IMAGE area (not whole block):
     top = track padding-top + (slide width / 2) because image is 1:1 */
  top:calc(var(--trackPadY) + (var(--slideW) / 2)) !important;
  transform:translateY(-50%) !important;

  z-index:10 !important;
  width:var(--btn) !important;
  height:var(--btn) !important;

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

  border:none !important;
  border-radius:999px !important;
  cursor:pointer !important;

  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;

  box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
  color:#111 !important;

  transition:opacity .15s ease, background-color .25s ease-in-out !important;

  /* default hidden */
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}

.yocan-fbt.has-overflow .yocan-fbt-btn{
  opacity:1 !important;
  pointer-events:auto !important;
  visibility:visible !important;
}

.yocan-fbt .yocan-fbt-btn:hover{
  background:rgba(255,255,255,.72) !important;
}

/* ✅ SVG icon exactly like Pills */
.yocan-fbt .carousel-btn__icon{
  width:22px !important;
  height:22px !important;
  display:block !important;
}

/* If you ever need flip (optional) */
.yocan-fbt .carousel-btn__icon.x-flip{ transform:scaleX(-1) !important; }

/* left / right */
.yocan-fbt .yocan-fbt-prev{ left:var(--btnEdge) !important; }
.yocan-fbt .yocan-fbt-next{ right:var(--btnEdge) !important; }

/* disabled: dim but visible */
.yocan-fbt .yocan-fbt-btn[disabled],
.yocan-fbt .yocan-fbt-btn[aria-disabled="true"]{
  opacity:.35 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  visibility:visible !important;
}

/* =========================================================
   Mobile / Tablet: keep arrows (DO NOT hide)
========================================================= */
@media (max-width: 849px){
  .yocan-fbt{
    --btn:40px;
    --slideW:150px;  /* must match mobile slide width */
    --trackPadY:10px;
    --btnEdge:6px;
  }

  /* keep your mobile spacing if you like */
  .yocan-fbt .slider-grid-track{
    padding:10px 15px !important; /* same as your old rule */
  }

  /* keep add button visible on touch */
  .yocan-fbt .vertical-product-card__buttons{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
}