/* RWD Slider - 前台通用樣式 v19.2.0 */
/* ===== FOUC Prevention & Fallback ===== */
/*
 * 防止 FOUC (Flash of Unstyled Content) 問題
 * 1. 初始狀態隱藏幻燈片，等待 JS 初始化
 * 2. 如果 JS 初始化失敗或延遲，1.5秒後仍會顯示（優雅降級）
 * 3. 使用 min-height 預留空間，避免 CLS
 */

/* Fallback animation - 即使 JS 失敗也會顯示 */
@keyframes rwd-slider-fallback-show {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}

.rwd-slider-wrapper {
visibility: hidden;
opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;
position: relative;
margin-left: auto;
margin-right: auto;
/* CLS Prevention: 預留最小高度 */
min-height: var(--rwd-slider-height-desktop, 300px);
/* Width Constraint */
max-width: var(--rwd-max-width-desktop, 100%);
/* Fallback: 0.4 秒後無論 JS 狀態如何都顯示，減少 FOUC（原 1.5s） */
animation: rwd-slider-fallback-show 0.4s ease 0.4s forwards;
}

/* 響應式最小高度，避免 CLS */
@media (max-width: 1023px) {
.rwd-slider-wrapper {
min-height: var(--rwd-slider-height-tablet, 250px);
max-width: var(--rwd-max-width-tablet, 100%);
}
}
@media (max-width: 767px) {
.rwd-slider-wrapper {
min-height: var(--rwd-slider-height-mobile, 200px);
max-width: var(--rwd-max-width-mobile, 100%);
}
}

/* JS 初始化成功時覆蓋 fallback 動畫 */
.rwd-slider-wrapper.rwd-slider--initialized {
visibility: visible !important;
opacity: 1 !important;
animation: none !important; /* 取消 fallback 動畫 */
min-height: auto; /* 初始化後移除最小高度 */
}

/* 確保第一張幻燈片在初始化前就正確顯示 */
.rwd-slider-wrapper:not(.rwd-slider--initialized) .swiper-slide:first-child {
opacity: 1 !important;
visibility: visible !important;
}
/* 確保第一張的連結可互動 */
.rwd-slider-wrapper:not(.rwd-slider--initialized) .swiper-slide:first-child .rwd-slider__slide-link {
pointer-events: auto;
}
.rwd-slider-main-area {
flex-grow: 1;
min-width: 0;
position: relative;
margin: 0 auto;
width: 100%;
/* 使用後台設定的間距 */
padding-top: var(--rwd-spacing-top-desktop, 0);
padding-bottom: var(--rwd-spacing-bottom-desktop, 0);
}

@media (max-width: 1023px) {
.rwd-slider-main-area {
padding-top: var(--rwd-spacing-top-tablet, 0);
padding-bottom: var(--rwd-spacing-bottom-tablet, 0);
}
}

@media (max-width: 767px) {
.rwd-slider-main-area {
padding-top: var(--rwd-spacing-top-mobile, 0);
padding-bottom: var(--rwd-spacing-bottom-mobile, 0);
}
}

/* =============================================================================
   📝 Slider 標題樣式 - 使用 PHP 生成的 CSS 變數
   ============================================================================= */
.rwd-slider__title {
margin: 0 0 15px 0;
padding: 0 15px;
/* 使用後台設定的對齊方式 */
text-align: var(--rwd-title-align, center);
font-weight: 600;
/* 使用後台設定的字體大小 */
font-size: var(--rwd-title-font-size-desktop, 22px);
line-height: 1.3;
color: inherit;
}

/* RWD 響應式標題字體大小 */
@media (max-width: 1023px) {
.rwd-slider__title {
font-size: var(--rwd-title-font-size-tablet, 20px);
}
}
@media (max-width: 767px) {
.rwd-slider__title {
font-size: var(--rwd-title-font-size-mobile, 18px);
}
}
.rwd-slider-container {
overflow: hidden;
position: relative;
width: 100%;
}
/* Aspect ratio mode (default) */
.rwd-slider-container::before {
content: '';
display: block;
padding-top: var(--rwd-slide-aspect, 56.25%);
}
/* Fixed height mode - override aspect ratio */
.rwd-slider-wrapper--fixed-height .rwd-slider-container::before {
display: none;
}
.rwd-slider-wrapper--fixed-height .rwd-slider-container {
height: var(--rwd-slider-height-desktop, 450px);
}
@media (max-width: 1023px) {
.rwd-slider-wrapper--fixed-height .rwd-slider-container {
height: var(--rwd-slider-height-tablet, 400px);
}
}
@media (max-width: 767px) {
.rwd-slider-wrapper--fixed-height .rwd-slider-container {
height: var(--rwd-slider-height-mobile, 300px);
}
}
.rwd-slider-container > .swiper-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 確保 wrapper 在箭頭下方 */
}
.rwd-slider-wrapper .swiper-slide {
transform: translateZ(0);
height: 100%;
}

/* =============================================================================
   🔧 防止 Slide 重疊問題
   使用 z-index 確保正確堆疊順序，而非 visibility hidden
   ============================================================================= */

/* 基礎：所有 slide 預設較低 z-index */
.rwd-slider-container .swiper-slide {
z-index: 1;
}

/* Active slide 最高優先級 */
.rwd-slider-container .swiper-slide-active {
z-index: 3 !important;
}

/* 前後 slide 中等優先級（for slide 效果） */
.rwd-slider-container .swiper-slide-prev,
.rwd-slider-container .swiper-slide-next {
z-index: 2;
}

/* Fade 效果模式下 - 非 active slide 透明 */
.rwd-slider-wrapper .swiper-fade .swiper-slide {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.rwd-slider-wrapper .swiper-fade .swiper-slide-active {
opacity: 1 !important;
pointer-events: auto !important;
}

/* =============================================================================
   🔧 Duplicate Slides 優化 - 防止循環跳動
   ============================================================================= */

/* 隱藏 duplicate slides，只在過渡時顯示 */
.rwd-slider-container .swiper-slide-duplicate {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 過渡期間顯示 duplicate slides - 強制顯示 */
.rwd-slider-container .swiper-slide-active,
.rwd-slider-container .swiper-slide-prev,
.rwd-slider-container .swiper-slide-next,
.rwd-slider-container .swiper-slide-duplicate-active,
.rwd-slider-container .swiper-slide-duplicate-prev,
.rwd-slider-container .swiper-slide-duplicate-next {
opacity: 1 !important;
visibility: visible !important;
}

/* 確保 duplicate slides 不會干擾點擊 */
.rwd-slider-container .swiper-slide-duplicate {
pointer-events: none;
}

/* 平滑過渡所有 slides */
.rwd-slider-wrapper .swiper-slide {
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.rwd-slider__slide-link,
.rwd-slider__slide-content {
display: block;
position: relative;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
/* 防止透明圖片透出底下的 slide */
background-color: var(--rwd-slide-bg, #fff);
}
.rwd-slider__slide-link {
cursor: pointer;
}
.rwd-slider__html-content {
height: 100%;
box-sizing: border-box;
}
.rwd-slider__img-container img,
.rwd-slider__img-container picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.rwd-slider__img-container img {
object-fit: var(--rwd-image-object-fit, cover);
object-position: var(--rwd-image-object-position, center);
}
.rwd-slider__video-placeholder {
background-color: #000;
width: 100%;
height: 100%;
position: relative;
}
.rwd-slider__caption{
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 3;
padding: 1em;
background: var(--rwd-caption-bg, rgba(0,0,0,0.5));
color: var(--rwd-caption-color, #fff);
font-size: var(--rwd-caption-font-size-desktop, 16px);
text-align: var(--rwd-caption-align, center);
box-sizing: border-box;
pointer-events: none;
}

/* RWD 響應式 Caption 字體大小 */
@media (max-width: 1023px) {
.rwd-slider__caption {
font-size: var(--rwd-caption-font-size-tablet, 14px);
}
}
@media (max-width: 767px) {
.rwd-slider__caption {
font-size: var(--rwd-caption-font-size-mobile, 12px);
}
}
.rwd-slider__caption-text {
margin: 0;
padding: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 使用後台設定的行數限制 */
-webkit-line-clamp: var(--rwd-caption-max-lines-desktop, 2);
line-clamp: var(--rwd-caption-max-lines-desktop, 2);
overflow: hidden;
text-overflow: ellipsis;
}

/* RWD 響應式 Caption 行數限制 */
@media (max-width: 1023px) {
.rwd-slider__caption-text {
-webkit-line-clamp: var(--rwd-caption-max-lines-tablet, 2);
line-clamp: var(--rwd-caption-max-lines-tablet, 2);
}
}
@media (max-width: 767px) {
.rwd-slider__caption-text {
-webkit-line-clamp: var(--rwd-caption-max-lines-mobile, 2);
line-clamp: var(--rwd-caption-max-lines-mobile, 2);
}
}
.rwd-slider__video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.rwd-slider__video-wrapper.is-playing {
visibility: visible;
opacity: 1;
}
.rwd-slider__video-wrapper iframe {
width: 100%;
height: 100%;
}
.rwd-slider__play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 68px;
height: 48px;
background-color: rgba(0,0,0,0.7);
border-radius: 10px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.rwd-slider__play-button:hover {
background-color: #cc181e;
}
.rwd-slider__play-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -50%);
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
}
.rwd-slider__overlay {
position: absolute;
z-index: 10;
pointer-events: none;
box-sizing: border-box;
}
.rwd-slider__overlay img {
max-width: 100%;
height: auto;
display: block;
}
/* Layer Styles */
.rwd-slider__layer {
position: absolute;
z-index: 12;
transform-style: preserve-3d;
opacity: 0;
transition-property: opacity, transform;
}
.swiper-slide-active .rwd-slider__layer.is-visible {
opacity: 1;
}
.rwd-slider__layer[data-anim-in='fadeIn'] { transform: translate(-50%, -50%); }
.swiper-slide-active .rwd-slider__layer.is-visible[data-anim-in='fadeIn'] { transform: translate(-50%, -50%); }
.rwd-slider__layer[data-anim-in='fadeInUp'] { transform: translate(-50%, calc(-50% + 20px)); }
.swiper-slide-active .rwd-slider__layer.is-visible[data-anim-in='fadeInUp'] { transform: translate(-50%, -50%); }
.rwd-slider__layer[data-anim-in='fadeInDown'] { transform: translate(-50%, calc(-50% - 20px)); }
.swiper-slide-active .rwd-slider__layer.is-visible[data-anim-in='fadeInDown'] { transform: translate(-50%, -50%); }
.rwd-slider__layer[data-anim-in='fadeInLeft'] { transform: translate(calc(-50% + 20px), -50%); }
.swiper-slide-active .rwd-slider__layer.is-visible[data-anim-in='fadeInLeft'] { transform: translate(-50%, -50%); }
.rwd-slider__layer[data-anim-in='fadeInRight'] { transform: translate(calc(-50% - 20px), -50%); }
.swiper-slide-active .rwd-slider__layer.is-visible[data-anim-in='fadeInRight'] { transform: translate(-50%, -50%); }

/* Controls */
.rwd-slider-wrapper .swiper-slide { transition-property: opacity, transform; }
.rwd-slider-wrapper .swiper-pagination-bullet{ transition: all 0.2s ease; }

/* =============================================================================
   🖼️ 縮圖導航 - 使用 PHP 生成的 CSS 變數
   ============================================================================= */
.rwd-slider-thumbs-wrapper {
position: relative;
display: flex;
align-items: center;
max-width: 100%;
width: var(--rwd-thumb-nav-width, 100%);
margin-top: var(--rwd-external-controls-gap, 15px);
}

.rwd-slider-thumbs {
box-sizing: border-box;
cursor: pointer;
flex-grow: 1;
min-width: 0;
overflow: hidden; /* Required for Swiper */
position: relative;
/* 使用 PHP 生成的縮圖高度 */
height: var(--rwd-thumb-height-desktop, 80px);
}

/* RWD 響應式縮圖高度 */
@media (max-width: 1023px) {
.rwd-slider-thumbs {
height: var(--rwd-thumb-height-tablet, 70px);
}
}
@media (max-width: 767px) {
.rwd-slider-thumbs {
height: var(--rwd-thumb-height-mobile, 60px);
}
}
.rwd-slider-thumbs .swiper-slide {
opacity: 0.5;
transition: opacity 0.3s ease;
height: 100%;
box-sizing: border-box;
}
.rwd-slider-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.rwd-slider-thumbs .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/*
 * 修正 WebP 模式下，<picture> 標籤導致縮圖拉伸的邏輯問題
 */
.rwd-slider-thumbs .swiper-slide picture {
display: block; /* 讓 <picture> 像 div 一樣是塊級元素 */
width: 100%;
height: 100%;
}

.rwd-slider-thumbs__placeholder {
background-color: #333;
color: #fff;
display:flex;
align-items:center;
justify-content:center;
}
.rwd-slider-thumbs__placeholder .dashicons {
font-size: 30px;
height: 30px;
width: 30px;
}
/* Fix: High specificity to override Swiper defaults */
.rwd-slider-wrapper .rwd-slider-thumbs__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 30px; /* Fallback */
height: 30px; /* Fallback */
background: rgba(0,0,0,0.5);
color: #fff;
border-radius: var(--rwd-thumb-arrow-radius, 50%) !important;
margin: 0 !important;
padding: 0 !important;
transition: opacity 0.3s ease;

/* Flex centering */
display: flex !important;
justify-content: center;
align-items: center;
box-sizing: border-box !important;
line-height: 1 !important;
border: none !important;
outline: none !important;
}
.rwd-slider-thumbs-wrapper:hover .rwd-slider-thumbs__arrow {
opacity: 1;
}
/* Thumbnail Arrow SVG Icon Size Control (Swiper latest version uses SVG) */
.rwd-slider-wrapper .rwd-slider-thumbs__arrow .swiper-navigation-icon {
width: var(--rwd-thumb-arrow-icon-size, 14px) !important;
height: var(--rwd-thumb-arrow-icon-size, 14px) !important;
max-width: var(--rwd-thumb-arrow-icon-size, 14px) !important;
max-height: var(--rwd-thumb-arrow-icon-size, 14px) !important;
}

/* Font icon fallback (for older Swiper versions) */
.rwd-slider-wrapper .rwd-slider-thumbs__arrow::after {
font-size: var(--rwd-thumb-arrow-icon-size, 14px) !important;
font-weight: bold;
}
.rwd-slider-thumbs__arrow--prev { left: 5px; }
.rwd-slider-thumbs__arrow--next { right: 5px; }
.rwd-slider-thumbs__arrow.swiper-button-disabled {
opacity: 0 !important;
cursor: auto;
pointer-events: none;
}
.rwd-slider__external-controls--bottom {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.rwd-slider__controls-wrapper--split {
display:flex;
justify-content:space-between;
align-items:center;
width: 100%;
}

.rwd-slider__external-controls--bottom .rwd-slider__arrows-container--2 {
flex-shrink: 0;
display: flex;
gap: 8px;
}

/* 第二組箭頭樣式 - 使用 CSS 變數 */
.rwd-slider__arrow-2 {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--rwd-arrow2-size-desktop, 36px);
height: var(--rwd-arrow2-size-desktop, 36px);
background: var(--rwd-arrow2-bg, rgba(0, 0, 0, 0.6));
color: var(--rwd-arrow2-color, #fff);
border-radius: 50%; /* 預設圓形，由 PHP inline CSS 覆蓋 */
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

/* 箭頭圖示 - 使用 Swiper 的圖示字體 */
.rwd-slider__arrow-prev-2::before,
.rwd-slider__arrow-next-2::before {
font-family: swiper-icons;
font-size: calc(var(--rwd-arrow2-size-desktop, 36px) * 0.35);
font-weight: bold;
color: inherit;
}
.rwd-slider__arrow-prev-2::before {
content: 'prev';
}
.rwd-slider__arrow-next-2::before {
content: 'next';
}

.rwd-slider__arrow-2:hover {
opacity: 0.85;
}
/* 無障礙改進 */
.rwd-slider-wrapper[aria-label] {
/* 已有 role="region" */
}

.rwd-slider__slide[aria-hidden="true"] {
visibility: hidden;
}

/* 移除箭頭的預設藍框，保持無障礙支援 */
.swiper-button-prev:focus,
.swiper-button-next:focus,
.rwd-slider__arrow:focus,
.rwd-slider-thumbs__arrow:focus {
outline: none;
}

/* 僅在鍵盤導航時顯示焦點指示器 */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible,
.rwd-slider__arrow:focus-visible,
.rwd-slider-thumbs__arrow:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}

/* 整個 wrapper 的焦點樣式（滾輪/鍵盤控制時）*/
.rwd-slider-wrapper:focus-visible {
outline: 2px solid #0073aa;
outline-offset: 2px;
}

/* 移除原本的 focus-within 樣式避免干擾 */
.rwd-slider-wrapper:focus-within:not(:focus-visible) {
outline: none;
}

/* 減少動畫（尊重使用者偏好） */
@media (prefers-reduced-motion: reduce) {
.rwd-slider-wrapper *,
.rwd-slider-wrapper *::before,
.rwd-slider-wrapper *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* =============================================================================
   🎨 進階主題系統 - CSS 變數
   用法: 在 slider wrapper 上加入 data-theme="dark" 等屬性
   ============================================================================= */
.rwd-slider-wrapper {
/* 預設主題變數 */
--arrow-bg: rgba(0, 0, 0, 0.6);
--arrow-bg-hover: rgba(0, 0, 0, 0.85);
--arrow-color: #fff;
--arrow-size: 48px;
--arrow-icon-size: 18px;
--bullet-color: rgba(255, 255, 255, 0.5);
--bullet-active-color: #fff;
--bullet-size: 10px;
--shadow-color: rgba(0, 0, 0, 0.15);
--border-radius: 8px;
}

/* 深色主題 */
.rwd-slider-wrapper[data-theme="dark"] {
--arrow-bg: rgba(30, 30, 30, 0.9);
--arrow-bg-hover: #222;
--bullet-color: rgba(200, 200, 200, 0.4);
--bullet-active-color: #fff;
}

/* 淺色主題 */
.rwd-slider-wrapper[data-theme="light"] {
--arrow-bg: rgba(255, 255, 255, 0.85);
--arrow-bg-hover: #fff;
--arrow-color: #333;
--bullet-color: rgba(0, 0, 0, 0.3);
--bullet-active-color: #333;
}

/* 漸層主題 */
.rwd-slider-wrapper[data-theme="gradient"] {
--arrow-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--arrow-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* =============================================================================
   🏹 箭頭基礎樣式
   使用 PHP 生成的 CSS 變數來設定箭頭外觀
   ============================================================================= */

/* 主箭頭 - 基礎樣式（使用 CSS 變數） */
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
/* 尺寸：使用後台設定的大小 */
width: var(--rwd-arrow-size-desktop, 48px);
height: var(--rwd-arrow-size-desktop, 48px);

/* 背景和顏色：使用後台設定 */
background: var(--rwd-arrow-bg, rgba(0, 0, 0, 0.6));
color: var(--rwd-arrow-color, #fff);

/* 重設 Swiper 預設樣式 */
--swiper-navigation-size: calc(var(--rwd-arrow-size-desktop, 48px) * 0.4);
--swiper-navigation-color: var(--rwd-arrow-color, #fff);

/* 定位偏移 */
top: calc(50% + var(--rwd-arrow-y-offset, 0px));
/*transform: translateY(-50%);*/

/* 過渡效果 */
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
opacity: 0.8;

/* 重設邊框和外框 */
border: none !important;
outline: none !important;
box-shadow: none !important;

/* 確保 SVG 圖示正確顯示和大小 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Swiper SVG 圖示大小控制（Swiper 最新版本使用 SVG 而非字體） */
.rwd-slider-wrapper .swiper-button-prev .swiper-navigation-icon,
.rwd-slider-wrapper .swiper-button-next .swiper-navigation-icon {
width: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
height: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
max-width: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
max-height: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
}

/* 如果使用字體圖示（舊版 Swiper 或 fallback） */
.rwd-slider-wrapper .swiper-button-prev::after,
.rwd-slider-wrapper .swiper-button-next::after {
font-size: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.35));
font-weight: 700;
}

.rwd-slider-wrapper .swiper-button-prev {
left: var(--rwd-arrow-x-offset, 15px);
}
.rwd-slider-wrapper .swiper-button-next {
right: var(--rwd-arrow-x-offset, 15px);
}

/* 🏹 External Sides Arrows Positioning (Desktop Only) */
@media (min-width: 1024px) {
.rwd-slider--arrows-external-sides .rwd-slider-main-area {
position: relative; /* Ensure reference context */
}
.rwd-slider--arrows-external-sides .swiper-button-prev {
left: auto;
right: 100%;
margin-right: var(--rwd-arrow-x-offset, 15px);
}
.rwd-slider--arrows-external-sides .swiper-button-next {
right: auto;
left: 100%;
margin-left: var(--rwd-arrow-x-offset, 15px);
}
}

/* 箭頭 Hover 效果 - 只改變透明度，不縮放（避免視覺移動） */
.rwd-slider-wrapper .swiper-button-prev:hover,
.rwd-slider-wrapper .swiper-button-next:hover {
opacity: 1 !important;
}

/* Hover 時顯示箭頭 */
.rwd-slider-wrapper:hover .swiper-button-prev,
.rwd-slider-wrapper:hover .swiper-button-next {
opacity: 0.9;
}

/* 縮圖箭頭樣式 - 使用 CSS 變數 */
.rwd-slider-thumbs__arrow {
width: var(--rwd-thumb-arrow-size, 32px) !important;
height: var(--rwd-thumb-arrow-size, 32px) !important;
background: var(--rwd-thumb-arrow-bg, rgba(0, 0, 0, 0.6)) !important;
color: var(--rwd-thumb-arrow-color, #fff) !important;
--swiper-navigation-size: calc(var(--rwd-thumb-arrow-size, 32px) * 0.4);
--swiper-navigation-color: var(--rwd-thumb-arrow-color, #fff);
border-radius: var(--rwd-thumb-arrow-radius, 50%);
opacity: 0.8;
}

.rwd-slider-thumbs__arrow:hover {
opacity: 1 !important;
transform: translateY(-50%) scale(1.05);
}

/* RWD 響應式箭頭尺寸 */
@media (max-width: 1023px) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
width: var(--rwd-arrow-size-tablet, 40px);
height: var(--rwd-arrow-size-tablet, 40px);
--swiper-navigation-size: calc(var(--rwd-arrow-size-tablet, 40px) * 0.4);
}
.rwd-slider-wrapper .rwd-slider__arrow-2 {
width: var(--rwd-arrow2-size-tablet, 32px);
height: var(--rwd-arrow2-size-tablet, 32px);
}
}

@media (max-width: 767px) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
width: var(--rwd-arrow-size-mobile, 36px);
height: var(--rwd-arrow-size-mobile, 36px);
--swiper-navigation-size: calc(var(--rwd-arrow-size-mobile, 36px) * 0.4);
}
.rwd-slider-wrapper .rwd-slider__arrow-2 {
width: var(--rwd-arrow2-size-mobile, 28px);
height: var(--rwd-arrow2-size-mobile, 28px);
}
}

/* 主箭頭 - hover 效果（只改透明度，不縮放）*/
.rwd-slider-wrapper .rwd-slider__arrow:not(.rwd-slider-thumbs__arrow):hover,
.rwd-slider-wrapper .swiper-button-prev:not(.rwd-slider-thumbs__arrow):hover,
.rwd-slider-wrapper .swiper-button-next:not(.rwd-slider-thumbs__arrow):hover {
opacity: 1 !important;
}

/* 縮圖箭頭 - hover 只改透明度 */
.rwd-slider-thumbs__arrow:hover {
opacity: 1 !important;
}

/* 所有箭頭 Hover 顯示 */
.rwd-slider-wrapper:hover .swiper-button-prev:not(.rwd-slider-thumbs__arrow),
.rwd-slider-wrapper:hover .swiper-button-next:not(.rwd-slider-thumbs__arrow) {
opacity: 0.9;
}

/* =============================================================================
   ⚫ 分頁點樣式選擇器
   用法: 在 slider wrapper 上加入 data-bullet-style="dot" 等屬性
   ============================================================================= */

/* 📌 分頁風格 1: 圓點 (預設) - 使用 PHP 生成的 CSS 變數 */
.rwd-slider-wrapper[data-bullet-style="dot"] .swiper-pagination-bullet,
.rwd-slider-wrapper:not([data-bullet-style]) .swiper-pagination-bullet {
width: var(--rwd-pagination-size-desktop, 10px);
height: var(--rwd-pagination-size-desktop, 10px);
background: var(--rwd-pagination-color, #ccc);
border: 2px solid rgba(255,255,255,0.6);
border-radius: 50%;
opacity: 1;
transition: all 0.3s ease;
margin: 0 calc(var(--rwd-pagination-gap, 8px) / 2);
}

.rwd-slider-wrapper[data-bullet-style="dot"] .swiper-pagination-bullet-active,
.rwd-slider-wrapper:not([data-bullet-style]) .swiper-pagination-bullet-active {
background: var(--rwd-pagination-active-color, #0073aa);
border-color: var(--rwd-pagination-active-color, #0073aa);
transform: scale(1.3);
}

/* RWD 響應式分頁點大小 */
@media (max-width: 1023px) {
.rwd-slider-wrapper[data-bullet-style="dot"] .swiper-pagination-bullet,
.rwd-slider-wrapper:not([data-bullet-style]) .swiper-pagination-bullet {
width: var(--rwd-pagination-size-tablet, 9px);
height: var(--rwd-pagination-size-tablet, 9px);
}
}
@media (max-width: 767px) {
.rwd-slider-wrapper[data-bullet-style="dot"] .swiper-pagination-bullet,
.rwd-slider-wrapper:not([data-bullet-style]) .swiper-pagination-bullet {
width: var(--rwd-pagination-size-mobile, 8px);
height: var(--rwd-pagination-size-mobile, 8px);
}
}

/* 📌 分頁風格 2: 長條 */
.rwd-slider-wrapper[data-bullet-style="bar"] .swiper-pagination-bullet {
width: 30px;
height: 4px;
border-radius: 2px;
background: var(--bullet-color);
opacity: 1;
transition: all 0.4s ease;
margin: 0 4px;
}

.rwd-slider-wrapper[data-bullet-style="bar"] .swiper-pagination-bullet-active {
background: var(--bullet-active-color);
width: 50px;
}

/* 📌 分頁風格 3: 數字 (需配合 Swiper fraction 類型) */
.rwd-slider-wrapper[data-bullet-style="number"] .swiper-pagination-fraction {
font-size: 16px;
font-weight: 600;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.rwd-slider-wrapper[data-bullet-style="number"] .swiper-pagination-current {
font-size: 24px;
color: #fff;
}

/* =============================================================================
   ✨ 進階視覺效果
   ============================================================================= */

/* 整體圓角（移除陰影）*/
.rwd-slider-wrapper {
/* box-shadow: 移除 */
border-radius: var(--border-radius);
overflow: hidden;
}

.rwd-slider-wrapper:hover {
/* box-shadow: 移除 */
}

/* 圖片 Hover 微縮放效果 */
.rwd-slider-wrapper .swiper-slide .rwd-slider__img-container img {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rwd-slider-wrapper:hover .swiper-slide-active .rwd-slider__img-container img {
transform: scale(1.03);
}

/* 標題淡入動畫 */
.rwd-slider-wrapper .rwd-slider__caption {
transition: opacity 0.4s ease, transform 0.4s ease;
}

.swiper-slide:not(.swiper-slide-active) .rwd-slider__caption {
opacity: 0;
transform: translateY(10px);
}

.swiper-slide-active .rwd-slider__caption {
opacity: 1;
transform: translateY(0);
}

/* =============================================================================
   📱 行動裝置與觸控優化
   ============================================================================= */

@media (max-width: 767px) {
.rwd-slider-wrapper {
--arrow-size: 36px;
--arrow-icon-size: 14px;
--bullet-size: 8px;
border-radius: 4px;
}

/* 行動裝置箭頭始終半透明顯示 */
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
opacity: 0.5 !important;
}

.rwd-slider-wrapper:hover .swiper-button-prev,
.rwd-slider-wrapper:hover .swiper-button-next {
opacity: 0.7 !important;
}
}

/* 觸控裝置優化 */
@media (hover: none) and (pointer: coarse) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
opacity: 0.6 !important;
}

/* 禁用圖片縮放避免效能問題 */
.rwd-slider-wrapper .swiper-slide .rwd-slider__img-container img {
transform: none !important;
}
}

/* =============================================================================
   🔄 自動播放進度條（需 JS 配合）
   ============================================================================= */
.rwd-slider-wrapper .swiper-autoplay-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255,255,255,0.2);
z-index: 20;
}

.rwd-slider-wrapper .swiper-autoplay-progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 0;
transition: width 0.1s linear;
}

/* =============================================================================
   🖼️ 圖片載入 Skeleton 效果
   ============================================================================= */
/* 只對尚未載入圖片的容器顯示 skeleton（排除影片佔位符）*/
.rwd-slider__img-container:not(.rwd-slider__video-placeholder):not(:has(img[src])):not(:has(img.swiper-lazy-loaded)) {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}

/* 影片佔位符 - 穩定黑色背景，無動畫 */
.rwd-slider__video-placeholder {
background-color: #000 !important;
animation: none !important;
}

/* 確保圖片容器有正確的定位和大小 */
.rwd-slider__img-container {
position: relative;
width: 100%;
height: 100%;
}

@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* =============================================================================
   🎛️ Header with Arrows - 標題區塊基礎樣式
   用於所有佈局的標題+箭頭功能
   ============================================================================= */

/* Base header styles */
.rwd-slider__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 0;
}

.rwd-slider__header .rwd-slider__title {
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}

/* Title icon */
.rwd-slider__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #666;
flex-shrink: 0;
}

.rwd-slider__title-icon svg {
width: 20px;
height: 20px;
}

/* Header arrows container */
.rwd-slider__header-arrows {
display: flex;
gap: 8px;
flex-shrink: 0;
}

/* Header arrow buttons */
.rwd-slider__header-arrow {
width: 32px;
height: 32px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #fff;
color: #666;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}

.rwd-slider__header-arrow:hover {
background: #f5f5f5;
border-color: #ccc;
}

.rwd-slider__header-arrow svg {
width: 16px;
height: 16px;
}


/* =============================================================================
   🏹 Arrow Navigation Fixes - 箭頭導航修正
   注意：基礎樣式已在 line 642 定義，這裡只補充遺漏的設定
   ============================================================================= */

/* 確保箭頭可點擊且在最上層 */
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
z-index: 50 !important;
pointer-events: auto !important;
cursor: pointer;
}

/* Hover 模式 - 僅在滑過時顯示 (需要加上 .rwd-slider--arrows-hover 類別) */
.rwd-slider-wrapper.rwd-slider--arrows-hover .swiper-button-prev,
.rwd-slider-wrapper.rwd-slider--arrows-hover .swiper-button-next {
opacity: 0;
}
.rwd-slider-wrapper.rwd-slider--arrows-hover:hover .swiper-button-prev:not(.swiper-button-disabled),
.rwd-slider-wrapper.rwd-slider--arrows-hover:hover .swiper-button-next:not(.swiper-button-disabled) {
opacity: 0.95;
}

/* Disabled state - 禁用箭頭樣式 (點擊阻止由 JS 處理) */
.rwd-slider-wrapper .swiper-button-disabled {
opacity: 0.3 !important;
cursor: not-allowed;
/* 不使用 pointer-events:none，讓 JS 處理點擊事件阻止 */
}

/* Arrow icon improvements */
/* SVG 圖示大小（Swiper 最新版本） */
.rwd-slider-wrapper .swiper-button-prev .swiper-navigation-icon,
.rwd-slider-wrapper .swiper-button-next .swiper-navigation-icon {
width: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
height: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.4)) !important;
}

/* 字體圖示大小（舊版 Swiper 或 fallback） */
.rwd-slider-wrapper .swiper-button-prev::after,
.rwd-slider-wrapper .swiper-button-next::after {
font-size: var(--rwd-arrow-icon-size, calc(var(--rwd-arrow-size-desktop, 48px) * 0.35));
font-weight: 700;
}

/* Mobile arrow improvements */
@media (max-width: 767px) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
width: 40px;
height: 40px;
opacity: 0.7;
}

.rwd-slider-wrapper .swiper-button-prev::after,
.rwd-slider-wrapper .swiper-button-next::after {
font-size: 14px;
}

/* Slightly visible on mobile without hover */
.rwd-slider-wrapper .swiper-button-prev:not(.swiper-button-disabled),
.rwd-slider-wrapper .swiper-button-next:not(.swiper-button-disabled) {
opacity: 0.6;
}
}

/* Touch device: Always show arrows */
@media (hover: none) and (pointer: coarse) {
.rwd-slider-wrapper .swiper-button-prev:not(.swiper-button-disabled),
.rwd-slider-wrapper .swiper-button-next:not(.swiper-button-disabled) {
opacity: 0.7;
}
}

/* =============================================================================
   Current Task: Fix Slider Arrow Positioning for External Sides
   ============================================================================= */
/* [Removed duplicate external arrows block] */

/* =============================================================================
   Dynamic Styling via Variables (Refactor)
   ============================================================================= */
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
/* Dimensions & Positioning */
width: var(--rwd-arrow-size-desktop, 50px);
height: var(--rwd-arrow-size-desktop, 50px);
/* Center alignment + User offset */
margin-top: calc( (var(--rwd-arrow-size-desktop, 50px) / -2) + var(--rwd-arrow-y-offset, 0px) );

/* Styling */
color: var(--rwd-arrow-color, #fff);
background: var(--rwd-arrow-bg, rgba(0,0,0,0.5));
border-radius: var(--rwd-arrow-radius, 50%) !important;
border: var(--rwd-arrow-border, none);
}

/* Tablet Override */
@media (max-width: 1023px) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
width: var(--rwd-arrow-size-tablet, 40px);
height: var(--rwd-arrow-size-tablet, 40px);
margin-top: calc( (var(--rwd-arrow-size-tablet, 40px) / -2) + var(--rwd-arrow-y-offset, 0px) );
}
}

/* Mobile Override */
@media (max-width: 767px) {
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
width: var(--rwd-arrow-size-mobile, 30px);
height: var(--rwd-arrow-size-mobile, 30px);
margin-top: calc( (var(--rwd-arrow-size-mobile, 30px) / -2) + var(--rwd-arrow-y-offset, 0px) );
}
}

.rwd-slider-wrapper .rwd-slider__arrow-2 {
border-radius: var(--rwd-arrow2-radius, 50%);
background: var(--rwd-arrow2-bg, transparent);
color: var(--rwd-arrow2-color, #333);
}
.rwd-slider-wrapper .rwd-slider-thumbs__arrow {
border-radius: var(--rwd-thumb-arrow-radius, 50%);
background: var(--rwd-thumb-arrow-bg, rgba(0,0,0,0.5));
color: var(--rwd-thumb-arrow-color, #fff);
width: var(--rwd-thumb-arrow-size, 30px);
height: var(--rwd-thumb-arrow-size, 30px);
margin-top: calc( var(--rwd-thumb-arrow-size, 30px) / -2 ); /* Centered */
}

/* Pagination / Dots Layout - Restoring missing styles */
.rwd-slider-wrapper .rwd-slider__external-controls--bottom {
display: flex;
align-items: center;
justify-content: center;
gap: var(--rwd-external-controls-gap, 15px);
margin-top: var(--rwd-external-controls-gap, 15px);
}
.rwd-slider-wrapper .rwd-slider__external-controls--bottom .swiper-pagination {
position: static !important;
transform: none !important;
margin-top: var(--rwd-pagination-v-offset, 0);
width: auto !important;
flex-shrink: 1;
}

.rwd-slider-wrapper .swiper-pagination-bullet {
border-radius: var(--rwd-dot-radius, 50%) !important;
width: var(--rwd-dot-width, var(--rwd-pagination-size-desktop));
height: var(--rwd-dot-height, var(--rwd-pagination-size-desktop));
background: var(--rwd-pagination-color, #ccc);
opacity: 1;
margin: 0 calc(var(--rwd-pagination-gap, 6px) / 2) !important;
}
.rwd-slider-wrapper .swiper-pagination-bullet-active {
background: var(--rwd-pagination-active-color, #0073aa);
}

.rwd-slider-wrapper .rwd-slider__slide img {
object-fit: var(--rwd-img-object-fit, cover);
object-position: var(--rwd-img-object-position, center);
}
.rwd-slider-wrapper .rwd-slider__slide {
background-color: var(--rwd-slide-bg-color, transparent);
}

/* =============================================================================
   Visibility Utility Classes (Refactor)
   ============================================================================= */
@media (min-width: 1025px) {
.rwd-hide-arrows-desktop .swiper-button-prev, .rwd-hide-arrows-desktop .swiper-button-next { display: none !important; }
.rwd-hide-dots-desktop .swiper-pagination { display: none !important; }
.rwd-show-thumbs-desktop .rwd-slider-thumbs-wrapper { display: flex !important; }

}
@media (min-width: 768px) and (max-width: 1023px) {
.rwd-hide-arrows-tablet .swiper-button-prev, .rwd-hide-arrows-tablet .swiper-button-next { display: none !important; }
.rwd-hide-dots-tablet .swiper-pagination { display: none !important; }
.rwd-show-thumbs-tablet .rwd-slider-thumbs-wrapper { display: flex !important; }

}
@media (max-width: 767px) {
.rwd-hide-arrows-mobile .swiper-button-prev, .rwd-hide-arrows-mobile .swiper-button-next { display: none !important; }
.rwd-hide-dots-mobile .swiper-pagination { display: none !important; }
.rwd-show-thumbs-mobile .rwd-slider-thumbs-wrapper { display: flex !important; }
}

/* =============================================================================
/* Force External Arrow Positioning (Overrides Layout Defaults) */
/* Desktop & Tablet: Add padding to wrapper to accommodate external arrows without cropping */
.rwd-slider-wrapper.rwd-slider--arrows-external-sides {
overflow: visible !important;
padding-left: 55px !important; /* Space for arrow + gap */
padding-right: 55px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}

/* Ensure main-area allows arrows to be positioned outside */
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider-main-area {
overflow: visible !important;
position: relative;
}

/* Ensure container clips content slides but allows arrows (siblings) to be seen via wrapper overflow */
.rwd-slider--arrows-external-sides .rwd-slider-container {
overflow: hidden !important;
}

/* Re-assert positioning logic with HIGHER SPECIFICITY */
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-prev,
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
opacity: 1 !important;
display: flex !important;
margin: 0 !important;
z-index: 1100 !important; /* Higher than Grid mode's 999 */
border-radius: var(--rwd-arrow-radius, 50%) !important; /* Ensure shape is applied */
}

/* Position arrows OUTSIDE the main-area using negative positioning */
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-prev {
left: -55px !important; /* Move outside main-area into wrapper padding */
right: auto !important;
}
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-next {
right: -55px !important; /* Move outside main-area into wrapper padding */
left: auto !important;
}

/* Tablet Override - Maintain padding but adjust arrow size/pos if needed */
@media (max-width: 1023px) {
.rwd-slider-wrapper.rwd-slider--arrows-external-sides {
 padding-left: 45px !important;
 padding-right: 45px !important;
}
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-prev {
left: -45px !important;
}
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-next {
right: -45px !important;
}
}

/* Mobile Override - Remove padding, revert to overlay arrows */
@media (max-width: 767px) {
.rwd-slider-wrapper.rwd-slider--arrows-external-sides {
padding-left: 0 !important;
padding-right: 0 !important;
}

.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-prev {
left: 5px !important;
background: rgba(0,0,0,0.3) !important;
}
.rwd-slider-wrapper.rwd-slider--arrows-external-sides .rwd-slider__arrow--1.swiper-button-next {
right: 5px !important;
background: rgba(0,0,0,0.3) !important;
}
}

/* =============================================================================
   🟢 Robust Arrow Shape Styling
   Ensures Admin setting overrides all other styles via modifier class.
   ============================================================================= */
.rwd-slider--arrow-shape-square .swiper-button-prev,
.rwd-slider--arrow-shape-square .swiper-button-next,
.rwd-slider-wrapper.rwd-slider--arrow-shape-square .rwd-slider__arrow--1 {
border-radius: 0 !important;
}

.rwd-slider--arrow-shape-rounded .swiper-button-prev,
.rwd-slider--arrow-shape-rounded .swiper-button-next,
.rwd-slider-wrapper.rwd-slider--arrow-shape-rounded .rwd-slider__arrow--1 {
border-radius: 12px !important;
}

.rwd-slider--arrow-shape-circle .swiper-button-prev,
.rwd-slider--arrow-shape-circle .swiper-button-next,
.rwd-slider-wrapper.rwd-slider--arrow-shape-circle .rwd-slider__arrow--1 {
border-radius: 50% !important;
}


/* ============================================================================
   Hotfix v21.0.8 - 修復點擊問題 (2026-01-11)
   ============================================================================ */

/* 桌面版：移除拖曳游標，使用標準游標 */
@media (min-width: 769px) {
.rwd-slider-wrapper .swiper-container,
.rwd-slider-wrapper .swiper-wrapper,
.rwd-slider-wrapper .swiper-slide {
cursor: default !important;
}

.rwd-slider-wrapper .swiper-container-free-mode > .swiper-wrapper {
cursor: default !important;
}
}

/* 行動版：保留拖曳游標 */
@media (max-width: 768px) {
.rwd-slider-wrapper .swiper-container {
cursor: grab;
}

.rwd-slider-wrapper .swiper-container:active {
cursor: grabbing;
}
}

/* 確保連結始終可點擊 */
.rwd-slider__slide-link {
cursor: pointer !important;
position: relative;
z-index: 10;
pointer-events: auto !important;
user-select: none;
-webkit-user-drag: none;
}

/* 箭頭確保可點擊 */
.rwd-slider-wrapper .swiper-button-prev,
.rwd-slider-wrapper .swiper-button-next {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 50 !important;
}

/* 縮圖確保可點擊 */
.rwd-slider-thumbs .swiper-slide {
cursor: pointer !important;
}

/* 播放按鈕確保可點擊 */
.rwd-slider__play-button {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 20;
}

/* =============================================================================
   Slider Positioning & Layout Utilities (Moved from Global for encapsulation)
   ============================================================================= */

/* Caption Position Modifiers */
.rwd-slider__caption--top { top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; transform:none !important; }
.rwd-slider__caption--bottom { top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; transform:none !important; }
.rwd-slider__caption--left { top:0 !important; left:0 !important; bottom:0 !important; right:auto !important; display:flex !important; align-items:center !important; width:30% !important; transform:none !important; }
.rwd-slider__caption--right { top:0 !important; right:0 !important; bottom:0 !important; left:auto !important; display:flex !important; align-items:center !important; width:30% !important; transform:none !important; }
.rwd-slider__caption--center { top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%,-50%) !important; }

/* Dedicated Slider Utilities (Used in Feature Modules) */
.rwd-slider-item-utility {
    position: relative;
    height: 500px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.rwd-slider-content-utility {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 30px;
    color: #fff;
}

.rwd-slider-title-utility {
    color: #fff !important;
    margin: 0 0 10px !important;
    font-size: 2em !important;
}

.rwd-slider-link-utility {
    color: #fff !important;
    text-decoration: none !important;
}