/* ---- 只針對 #heroCarousel，避免影響其它版面 ---- */
#heroCarousel { position: relative; }
#heroCarousel .carousel-inner {
    position: relative; width: 100%; overflow: hidden;
}
#heroCarousel .carousel-item {
    position: relative;
    display: none;
    -webkit-transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
}
#heroCarousel .carousel-item.active,
#heroCarousel .carousel-item-next,
#heroCarousel .carousel-item-prev { display: block; }

#heroCarousel .carousel-item-next:not(.carousel-item-start),
#heroCarousel .active.carousel-item-end { transform: translateX(100%); }
#heroCarousel .carousel-item-prev:not(.carousel-item-end),
#heroCarousel .active.carousel-item-start { transform: translateX(-100%); }
#heroCarousel .carousel-item.active { transform: translateX(0); }

/* 讓圖片填滿區塊（依需求調高） */
#heroCarousel .carousel-item img {
    width: 100%;
    height: 420px;           /* 自行調整 */
    object-fit: cover;
}
@media (max-width: 768px) {
    #heroCarousel .carousel-item img { height: 280px; }
}

/* 指示點 */
#heroCarousel .carousel-indicators {
    position: absolute; right: 0; bottom: 10px; left: 0;
    display: flex; justify-content: center; padding: 0; margin: 0;
    list-style: none;
}
#heroCarousel .carousel-indicators [data-bs-target] {
    box-sizing: content-box; width: 10px; height: 10px; padding: 0;
    margin: 0 4px; border-radius: 50%;
    background-color: rgba(255,255,255,.7); border: 0;
}
#heroCarousel .carousel-indicators .active {
    background-color: #fff;
}

/* 左右控制箭頭（使用 Bootstrap 的內建 SVG） */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    position: absolute; top: 0; bottom: 0; width: 15%;
    display: flex; align-items: center; justify-content: center;
    opacity: .5; transition: opacity .15s;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover { opacity: .9; }
#heroCarousel .carousel-control-prev { left: 0; }
#heroCarousel .carousel-control-next { right: 0; }

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    display: inline-block; width: 2rem; height: 2rem; background: no-repeat 50% / 100% 100%;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
#heroCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#heroCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M4.646 14.354a.5.5 0 0 1 0-.708L9.293 8 4.646 3.354a.5.5 0 1 1 .708-.708l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e");
}

/* 修復箭頭樣式被吃掉問題 */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}

#heroCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

#heroCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 14.354a.5.5 0 0 1 0-.708L9.293 8 4.646 3.354a.5.5 0 1 1 .708-.708l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0z'/%3E%3C/svg%3E");
}