.bc-slider-wrap{
  --bc-shadow: rgba(60, 40, 20, 0.18);

  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 60px 20px 40px;
  box-sizing:border-box;
}
.bc-slider-wrap *{ box-sizing:border-box; }

.bc-slider-stage{
  position:relative;
  height: 380px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 1400px;
}

.bc-slide{
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 40px var(--bc-shadow);
  background-size: cover;
  background-position:center;
  transition: transform 0.55s cubic-bezier(.22,.85,.4,1),
              width 0.55s cubic-bezier(.22,.85,.4,1),
              height 0.55s cubic-bezier(.22,.85,.4,1),
              opacity 0.55s ease,
              filter 0.55s ease,
              z-index 0s 0.28s;
  cursor:pointer;
}

.bc-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

/* Position variants: fixed pixel offsets from center so slides sit close
   together regardless of their individual width. */
.bc-slide[data-pos="-2"]{ width:170px; height:230px; transform: translate(-50%,-50%) translateX(-490px) scale(.85); opacity:0.55; filter:saturate(.8); z-index:1; }
.bc-slide[data-pos="-1"]{ width:220px; height:290px; transform: translate(-50%,-50%) translateX(-314px) scale(.92); opacity:0.85; filter:saturate(.9); z-index:2; }
.bc-slide[data-pos="0"]{  width:420px; height:340px; transform: translate(-50%,-50%) translateX(0) scale(1);   opacity:1;    filter:none; z-index:3; }
.bc-slide[data-pos="1"]{  width:220px; height:290px; transform: translate(-50%,-50%) translateX(310px) scale(.92);  opacity:0.85; filter:saturate(.9); z-index:2; }
.bc-slide[data-pos="2"]{  width:170px; height:230px; transform: translate(-50%,-50%) translateX(490px) scale(.85); opacity:0.55; filter:saturate(.8); z-index:1; }
.bc-slide[data-pos="hidden"]{ width:150px; height:200px; transform: translate(-50%,-50%) translateX(0) scale(.7); opacity:0; z-index:0; pointer-events:none; }

.bc-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:#ffffff;
  border:none;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  color:#6b4a2f;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition: background .2s ease, transform .2s ease;
}
.bc-arrow:hover{ background:#f4e3d2; }
.bc-arrow:active{ transform: translateY(-50%) scale(0.92); }
.bc-arrow.bc-prev{ left: 0; }
.bc-arrow.bc-next{ right: 0; }

.bc-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 28px;
}
.bc-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e3c8ae;
  cursor:pointer;
  transition: background .25s ease, transform .25s ease;
}
.bc-dot.bc-active{
  background: #b8895a;
  transform: scale(1.25);
}

@media (max-width: 720px){
  .bc-slider-wrap{ padding: 40px 0 30px; }

  .bc-slider-stage{ height:380px; overflow:hidden; }

  /* On mobile only the active slide is shown, full width, same fixed
     size for every slide. All other positions are pushed off-screen
     and hidden so there is no peeking of neighbouring slides. */
  .bc-slide{
    width:100% !important;
    height:380px !important;
    left:0 !important;
    top:50% !important;
    border-radius:0 !important;
  }

  .bc-slide[data-pos="0"]{
    transform: translate(0,-50%) translateX(0) scale(1) !important;
    opacity:1 !important;
    filter:none !important;
    z-index:3 !important;
  }
  .bc-slide[data-pos="-2"],
  .bc-slide[data-pos="-1"]{
    transform: translate(0,-50%) translateX(-100%) scale(1) !important;
    opacity:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }
  .bc-slide[data-pos="1"],
  .bc-slide[data-pos="2"]{
    transform: translate(0,-50%) translateX(100%) scale(1) !important;
    opacity:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }
  .bc-slide[data-pos="hidden"]{
    transform: translate(0,-50%) translateX(0) scale(1) !important;
    opacity:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
  }

  .bc-arrow{ width:38px; height:38px; font-size:16px; }
  .bc-arrow.bc-prev{ left: 6px; }
  .bc-arrow.bc-next{ right: 6px; }
}