/**
 * RS Polt Slide v1.7.0 — 前台樣式
 *
 * 所有 class 皆 .rspoltslide- 前綴。
 * Splide 原生 class 限定在 .rspoltslide-wrapper 作用域下。
 * 零多餘內外距，100% 貼合容器。
 *
 * splide-core.min.css 不含箭頭樣式，全部在此自行處理。
 */

/* ─── Reset：外層容器 ──────────────────────────────────── */

.rspoltslide-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0;
    line-height: 0;
}

.rspoltslide-wrapper *,
.rspoltslide-wrapper *::before,
.rspoltslide-wrapper *::after {
    box-sizing: border-box;
}

/* ─── Splide 共用覆寫 ──────────────────────────────────── */

.rspoltslide-wrapper .splide {
    margin: 0;
    padding: 0;
}

.rspoltslide-wrapper .splide__track {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.rspoltslide-wrapper .splide__list {
    margin: 0;
    padding: 0;
}

.rspoltslide-wrapper .splide__slide {
    margin: 0;
    padding: 0;
    border: 0;
}

/* ─── 大圖 ─────────────────────────────────────────────── */

.rspoltslide-wrapper .rspoltslide-main {
    position: relative;
    width: 100%;
}

.rspoltslide-main-image {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 固定比例 */
    overflow: hidden;
    background-color: #f0f0f0;
}

.rspoltslide-main-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-user-drag: none;
}

/* ─── 大圖拖曳手型 ─────────────────────────────────────── */

.rspoltslide-wrapper .rspoltslide-main .splide__track {
    cursor: grab;
}

.rspoltslide-wrapper .rspoltslide-main .splide__track:active {
    cursor: grabbing;
}

/* ═══ 箭頭（splide-core.min.css 不含任何箭頭樣式，全部自行處理）═══ */

.rspoltslide-wrapper .rspoltslide-main .splide__arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow:hover {
    opacity: 1;
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow--prev {
    left: 12px;
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow--next {
    right: 12px;
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow svg {
    width: 16px;
    height: 16px;
    fill: #333;
}

/* ★ 核心修正：Splide JS 產生的箭頭 SVG 預設朝右，
   左箭頭必須水平翻轉。core CSS 沒有這條，theme CSS 才有。 */
.rspoltslide-wrapper .rspoltslide-main .splide__arrow--prev svg {
    transform: scaleX(-1);
}

.rspoltslide-wrapper .rspoltslide-main .splide__arrow:disabled {
    display: none;
}

/* ─── 縮圖（4:3 比例） ─────────────────────────────────── */

.rspoltslide-wrapper .rspoltslide-thumbs {
    margin-top: 10px;
    width: 100%;
    cursor: grab;
}

.rspoltslide-wrapper .rspoltslide-thumbs:active {
    cursor: grabbing;
}

.rspoltslide-wrapper .rspoltslide-thumbs .splide__list {
    height: auto;
}

.rspoltslide-thumb-image {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 — padding-bottom 比 aspect-ratio 在 Safari flex 子元素中更穩定 */
    overflow: hidden;
    background-color: #f0f0f0;
}

.rspoltslide-thumb-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-user-drag: none;
}

/* ─── 縮圖 Active 狀態 ─────────────────────────────────── */

.rspoltslide-wrapper .rspoltslide-thumbs .splide__slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.rspoltslide-wrapper .rspoltslide-thumbs .splide__slide.is-active {
    opacity: 1;
}

.rspoltslide-wrapper .rspoltslide-thumbs .splide__slide:hover {
    opacity: 0.85;
}

.rspoltslide-wrapper .rspoltslide-thumbs .splide__slide.is-active:hover {
    opacity: 1;
}

/* ─── 隱藏 Splide 預設 pagination ───────────────────────── */

.rspoltslide-wrapper .splide__pagination {
    display: none;
}