/* Beautyforest, product-carousel block styles. Enqueued via block.json "style". Uses tokens.css vars. */

/* ===========================================================
   Product carousel  (.bf-acf-carousel)
   =========================================================== */
.bf-acf-carousel{
  padding:clamp(2rem,5vw,3rem) clamp(1rem,5vw,2rem);
}

/* homepage: standard vertical gap above the "New in" carousel */
.home .bf-acf-carousel{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:4px;
}

.bf-acf-carousel__heading{
  font-family:var(--wp--preset--font-family--heading);
  color:var(--bf-graphite);
  margin:0 0 1.25rem;
}

.bf-carousel__track{
  list-style:none;
  /* left inset gives the cards' 3D ribbon overhang room so it isn't clipped
     by the scroll container; negative margin keeps the first card aligned */
  margin:0 0 0 -14px;
  padding:4px 0 6px 14px;
  scroll-padding-left:14px;
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;       /* Firefox, hide scrollbar, keep scroll */
  -ms-overflow-style:none;    /* legacy Edge */
}

.bf-carousel__track li.product{
  flex:0 0 240px;
  scroll-snap-align:start;
  margin:0;
}

/* Hide the horizontal scrollbar (Chrome/Safari), arrows + swipe still scroll */
.bf-carousel__track::-webkit-scrollbar{
  display:none;
  height:0;
  width:0;
}

/* carousel head + arrow navigation */
.bf-acf-carousel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem}

.bf-acf-carousel__head .bf-acf-carousel__heading{margin:0}

/* eyebrow above the heading (matches brand-strip) */
.bf-acf-carousel__headings{display:flex;flex-direction:column;gap:6px;min-width:0}
.bf-acf-carousel__eyebrow{font-family:var(--bf-font-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2faa5a}

/* nav arrows, bottom-left, under the carousel */
.bf-acf-carousel__nav{display:flex;gap:.5rem;flex:0 0 auto;justify-content:flex-start;margin:16px 0 0}

.bf-acf-carousel__nav[hidden]{display:none}

.bf-acf-carousel__arrow{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--bf-radius);background:linear-gradient(135deg,#2faa5a,#1f8044);color:#fff;cursor:pointer;
  transition:background .18s ease,color .18s ease,opacity .18s ease}

.bf-acf-carousel__arrow:hover:not(:disabled){background:linear-gradient(135deg,#3cc471,#249650);color:#fff}

.bf-acf-carousel__arrow:disabled{opacity:.35;cursor:default}

.bf-acf-carousel__arrow svg{display:block}