/* ===== 商品卡片：直式版型 =====
   順序：主圖 → 標籤 → 航線（機票）→ 主標 → 副標 → 價格（右對齊）→ 按鈕 */

.fc-card {
    /* flex column 是為了讓 .fc-card-body 能吸收卡片多出來的高度（輪播裡卡片被拉成等高），
       內部的 .fc-card-foot 才有空間用 margin-top:auto 靠底。單卡時高度是 auto，
       沒有多餘空間，外觀與原本的 block 排版完全相同。 */
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 20px 0;
    padding: 12px 10px;
    background: #F8F8F8;
    border-radius: 4px;
    overflow: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* 卡片底色 #F8F8F8 與頁面白底幾乎同色，只靠色差看不出邊界，
       所以預設就帶一層陰影把卡片從背景浮起來。
       存成變數是因為 hover 要「疊加」綠色光暈而不是把它換掉 ——
       直接覆寫的話滑鼠移上去卡片反而會失去陰影、看起來變平。
       兩層：近距離的銳利接觸陰影 + 遠距離的擴散陰影，比單層自然。
       值刻意控制在「往下 14px、往上 6px」以內，剛好塞得進 .splide__track 的 padding
       （見下方 .fc-slider .splide__track 的說明）；改大就要一起改那個 padding。 */
    --fc-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.12);
    box-shadow: var(--fc-card-shadow);
    transition: box-shadow 0.25s ease;
    margin-left: 1px;
}
.fc-card:hover {
    box-shadow: var(--fc-card-shadow), 0 0 1px 1px #11D07333;
}

/* --- 主圖 --- */
.fc-card-media {
    position: relative;
    /* 不參與伸縮：卡片高度被拉高時圖片維持 aspect-ratio 的比例，不會被壓扁。 */
    flex: 0 0 auto;
    width: 100%;
    /* 比例可由輪播區塊調整（--fc-media-ratio）。不給值時是 16/9
       （2026-10-07 由 4/3 改）：一排兩張時卡片約矮 43px，版面比較不壓迫。
       斜線兩側的空白是必要的，沒有空白某些解析器會判成無效值。 */
    aspect-ratio: var(--fc-media-ratio, 16 / 9);
    background: #f2f3f5;
    overflow: hidden;
}
/* 選擇器刻意帶到 .fc-card（= (0,2,1)）。
   主題幾乎都會寫一條 img 的規則，例如 `.entry-content img { height: auto }`
   （= (0,1,1)，與 .fc-card-media img 同級）—— 同級又排在我們後面就會勝出，
   height:100% 被蓋掉，圖片只按原始比例長、在比例框下方留白。
   提高一級就不必賭載入順序（跟箭頭 hover 用 .fc-slider.splide 是同一個理由）。
   object-fit: cover 讓圖片放大填滿整個比例框，多出來的部分裁掉。 */
.fc-card .fc-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 3px;
}

/* --- 業者 Logo：未設定時整個區塊不輸出，自然隱藏 --- */
.fc-card-logo {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    line-height: 0;
}
.fc-card-logo img {
    display: block;
    max-width: 88px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: none;
}

/* --- 內容區 --- */
.fc-card-body {
    padding-top: 20px;
    /* 吸收卡片扣掉圖片後剩下的高度，並讓 .fc-card-foot 的 margin-top:auto 有作用。
       這裡改成 flex 不會動到任何間距：flex 下相鄰 margin 不塌陷，但底下每個區塊的
       margin-top 都是 0（只有副標 3px、價格 16px、按鈕 10px），
       而 block 排版時會塌陷的組合（標籤 6px + 航線 0px）在兩邊算出來都是 6px。
       flex-shrink 設 0 是為了內容真的超高時不要擠壓，寧可溢出（.fc-card 有 overflow:hidden）。 */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* 價格與按鈕整組。margin-top:auto 把「卡片被拉成等高後多出來的高度」全部吃掉，
   於是同一列每張卡的價格／按鈕落在同一條水平線上，留白不會堆在按鈕下方。
   沒有多餘高度時 auto 算出來是 0，價格的 16px 與按鈕的 10px 原樣保留 ——
   所以最高的那張卡（留白本來就是 0）外觀完全不變。 */
.fc-card-foot {
    margin-top: auto;
}

/* --- 分類標籤（可多筆，淺灰圓角藥丸） --- */
.fc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px 0;
}
.fc-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3.5px;
    background: #FFF;
    color: #575757;
    white-space: nowrap;

    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .05em;
}

/* --- 航線（僅機票顯示）：出發地 ✈ 目的地 --- */
.fc-route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
}
.fc-route-city {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fc-route-name {
    color: #111827;
    white-space: nowrap;

    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.fc-route-code {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
    letter-spacing: 0.5px;
}
.fc-route-arrow {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    color: #22c55e;
}
.fc-route-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #d1d5db;
}
.fc-route-arrow svg {
    position: relative;
    width: 20px;
    height: 20px;
    fill: currentColor;
    background: #F8F8F8;
    padding: 0 5px;
    box-sizing: content-box;
}

/* --- 主標題（黑） --- */
.fc-card .fc-title {
    margin: 0;
    line-height: 1.4;
    color: #000;

    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 700;
    font-size: 16px;
}

/* --- 副標題（綠） --- */
.fc-subtitle {
    margin: 3px 0 0;
    color: #11D073;
    line-height: 1.5;

    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 500;
    font-size: 12px;
}

/* --- 價格區（右對齊，兩行：原價刪除線 + 新價大字） --- */
.fc-price {
    text-align: right;
    margin-top: 16px;
}
/* 原價：文字紅色，但「刪除線」是灰色（與文字不同色，依設計稿）。
   設計稿的線左右各比文字多出約 5px，原生 text-decoration 只會貼齊文字寬度
   （實測 padding 也撐不開它），因此改用偽元素自繪線。 */
.fc-old-price {
    position: relative;
    display: inline-block; /* 需貼合文字寬度，block 會讓線橫跨整列 */
    line-height: 1;        /* 內容盒 = 1em，讓刪除線的垂直位置可用 em 精準對齊 */
    color: #E23232;
    text-decoration: none;
    margin-bottom: 2px;
    margin-right: 5px;

    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 11px;
}
.fc-old-price::after {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: 50%; /* 配合 line-height:1，即為數字筆畫的垂直中心（實測對齊） */
    height: 1px;
    background: #616161;
    pointer-events: none;
}
/* 優惠價：改為 block 級 flex，確保它一定換行到原價下方
   （原價改為 inline-block 後，若這裡仍是 inline-flex 兩者會並排） */
.fc-new-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    justify-content: flex-end;
}
.fc-currency {
    color: #616161;

    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 500;
    font-size: 10px;
}
.fc-amount {
    color: #111827;
    line-height: 1;

    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 36px;
}
.fc-price-note {
    text-align: right;
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1;
}

/* --- 連結按鈕（綠色實心，hover 轉綠→黃漸層） --- */
.fc-action-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    /* isolation 讓按鈕自成一個堆疊脈絡，底下 ::before 的 z-index:-1 才會留在按鈕內，
       而不是跑到卡片背景後面（那樣漸層會整個看不到）。 */
    position: relative;
    isolation: isolate;
    background: #11D073;
    color: #ffffff;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .12em;
    line-height: 1.5;
    margin-top: 10px;
}

/* hover 漸層畫在覆蓋層上、用 opacity 淡入。
   為什麼不直接 transition background：漸層是 background-image，Chrome 對它採離散處理
   （已實測，transition 期間 computed value 直接跳到終值），改漸層會變成硬切；
   opacity 則一定補間。z-index:-1 讓覆蓋層疊在按鈕綠底之上、文字之下。 */
.fc-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #11D073 5%, #FAD95F 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* 依設計稿量測：起點 #11D073，前 5% 維持純綠後線性過渡到 #FAD95F。
   選擇器一定要帶 .fc-card 前綴。主題 ashe 的 a:not(.header-logo-a):hover 特異度為 (0,2,1)，
   且該規則是 wp_head 後段才輸出的 inline style；單用 .fc-action-btn:hover (0,2,0) 會被它蓋掉，
   文字會被換成主題 accent 色而不是白色。加上前綴後為 (0,3,0)，不依賴載入順序即可勝出。 */
.fc-card .fc-action-btn:hover,
.fc-card .fc-action-btn:focus {
    color: #ffffff;
}
.fc-card .fc-action-btn:hover::before,
.fc-card .fc-action-btn:focus::before {
    opacity: 1;
}

/* --- 窄螢幕微調（數值皆為桌機版的略縮，不可大於桌機基礎值） --- */
@media (max-width: 480px) {
    .fc-card {
        max-width: 100%;
    }
    .fc-card-body {
        padding-top: 16px; /* 桌機 20px */
    }
    /* 需帶 .fc-card 前綴才蓋得過桌機的同名規則（特異度相同、位置在後才生效） */
    .fc-card .fc-title {
        font-size: 15px; /* 桌機 16px */
    }
    .fc-amount {
        font-size: 32px; /* 桌機 36px */
    }
    .fc-route-name {
        font-size: 14px; /* 桌機 15px */
    }
}

/* --- 輪播（[product_card_slider]） --- */
.fc-slider {
    width: 100%;
    margin: 20px 0;
}

/* 給卡片陰影一點空間。
   Splide 的 .splide__track 是 overflow: hidden，而且裁切是裁在「padding box」，
   卡片又剛好貼齊 track 的四邊（實測上／下／左都是 0px）—— 不補空間的話
   box-shadow 只會被裁掉，畫面上什麼都看不到（computed style 卻還是漂亮的 rgba）。
   這裡只補上下：左右補了會壓縮卡片寬度（卡片是填滿 slide 的），
   而水平方向的陰影本來就還有 slide 之間的 gap 可以顯示。
   卡片自己的 height:100% 不受影響 —— padding 加在 track（祖先）上，
   不會動到 flex item 的高度，也就不會踩到百分比高度的循環計算。 */
.fc-slider .splide__track {
    padding: 14px 0;
}

/* 輪播裡的卡片要填滿 slide：不受 .fc-card 的 max-width: 400px 與 margin 影響。
   height: 100% + box-sizing 讓同一列的卡片等高（slide 被 Splide 的 flex 撐成一致高度）；
   少了 box-sizing 的話 content-box 會多出上下 padding，卡片反而溢出 slide。 */
.fc-slider .fc-card {
    max-width: none;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

/* 輪播內限制標題／副標的行數，行數由輪播區塊輸出（--fc-title-lines／--fc-subtitle-lines）。
   固定的是「行數」而不是 px，所以與卡片寬度無關 —— 同一段副標在卡寬 145px（per_page=3）
   佔 4 行、225px（per_page=2）只佔 2 行，寫死 px 換個 per_page 或斷點就會破。
   剩下的高度差由 .fc-card-foot 的 margin-top:auto 吸收。
   單卡 shortcode 不受影響，仍顯示全文。
   選擇器帶到 .fc-card 是為了特異度 (0,3,0)，不依賴載入順序（frontend.css 排在
   splide.min.css 之前）。 */
.fc-slider .fc-card .fc-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fc-title-lines, 1);
    overflow: hidden;
}
.fc-slider .fc-card .fc-subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fc-subtitle-lines, 2);
    overflow: hidden;
}

/* 「不限制」要把整個機制關掉。只把行數寫成 none 不夠 —— display:-webkit-box 會留下來，
   所以連 display 一起還原成 block。特異度 (0,4,0)，高於上面兩條。 */
.fc-slider[data-fc-title-lines="none"] .fc-card .fc-title,
.fc-slider[data-fc-subtitle-lines="none"] .fc-card .fc-subtitle {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

/* Splide 預設把分頁圓點絕對定位在容器底部 .5em，會直接壓在卡片的按鈕上。
   改成一般流、移到輪播下方。箭頭維持 Splide 預設（疊在卡片左右兩側）。 */
.fc-slider .splide__pagination {
    position: static;
    margin-top: 14px;
}

/* --- 輪播的箭頭與分頁點樣式 ---
   顏色與尺寸由 shortcode／區塊以 CSS 變數輸出在 .fc-slider 的 style 上，
   形狀用 data 屬性。這裡每個 var() 的預設值都刻意等於 Splide 的原值，
   所以「沒有自訂樣式」的輪播外觀與加入這個功能之前完全一樣。

   注意特異度：frontend.css 排在 splide.min.css「之前」（實測），所以特異度相同時
   一律由 Splide 勝出。要覆寫 Splide 的規則就必須把特異度寫得比它高。

   em 的基準要注意：.splide__arrow 是 <button>，字級來自瀏覽器 UA 樣式（Chrome 13.33px），
   不是 .fc-slider 的 15px。所以 Splide 的 2em ≈ 26.7px、1.2em ≈ 16px。 */

/* 箭頭：Splide 預設 2em 圓形、#ccc 底、黑色圖示、0.7 半透明 */
.fc-slider .splide__arrow {
    background: var(--fc-arrow-bg, #cccccc);
    width: var(--fc-arrow-size, 2em);
    height: var(--fc-arrow-size, 2em);
    opacity: var(--fc-arrow-opacity, .7);
}

/* 圖示大小跟著按鈕走。0.6 = Splide 的 1.2em / 2em，
   所以沒自訂大小時圖示與 Splide 完全相同。 */
.fc-slider .splide__arrow svg {
    fill: var(--fc-arrow-color, #000000);
    width: calc(var(--fc-arrow-size, 2em) * .6);
    height: calc(var(--fc-arrow-size, 2em) * .6);
}

/* 這裡用 .fc-slider.splide（同一元素上的兩個 class）把特異度提到 (0,4,0)：
   Splide 的 .splide__arrow:hover:not(:disabled) 是 (0,3,0) 且排在後面，
   同等級的話會蓋掉我們的值，自訂成不透明的箭頭 hover 時反而會變淡。 */
.fc-slider.splide .splide__arrow:hover:not(:disabled) {
    opacity: var(--fc-arrow-opacity-hover, .9);
}

/* Splide 的 .splide__arrow:disabled 是 (0,2,0)，與我們的基礎規則同級又排在後面，
   會蓋掉 --fc-arrow-opacity。這裡明寫成 (0,3,0)，讓「不能點時變淡」不依賴載入順序。

   同時把整顆藏起來。Splide 的 Arrows 元件在沒有上一張／下一張時會把按鈕設成
   disabled（splide.min.js：g.disabled = prev < 0、m.disabled = next < 0），
   但它自己的 CSS 只寫 opacity: .3 —— 邊界那顆會以 30% 的灰圓留在畫面上，
   看起來像壞掉的按鈕。使用者要的是「左邊沒內容就不要有左箭頭、右邊沒內容
   就不要有右箭頭」。

   用 visibility 而不是 display：top／bottom 兩組的箭頭欄是 auto 寬度，
   display: none 會讓欄寬塌成 0，另一顆箭頭與分頁點跟著位移；
   visibility: hidden 保留版面，所以換頁時卡片不會跳動。
   （outside 的箭頭與軌道共用同一格、不佔欄寬，兩種寫法都動不到卡片寬度；
   用 visibility 只是為了四種位置共用同一條規則。） */
.fc-slider .splide__arrow:disabled {
    opacity: .3;
    visibility: hidden;
}

/* 形狀。圓形（circle）就是 Splide 預設，不需要規則也不輸出屬性。 */
.fc-slider[data-fc-arrow-shape="rounded"] .splide__arrow {
    border-radius: 12px;
}

.fc-slider[data-fc-arrow-shape="square"] .splide__arrow {
    border-radius: 4px;
}

/* --- 箭頭位置 ---
   由 data-fc-arrow-pos 控制，值為 overlay／outside／top／bottom。
   overlay 是 Splide 的原生行為（absolute + top: 50% 疊在卡片上），
   所以「沒有這個屬性」就等於 overlay，這裡不需要為它寫任何規則 ——
   跟形狀用 circle 當預設是同一個套路。

   為什麼用 CSS Grid 而不是 absolute：
   Splide 把箭頭 absolute 定位在 .splide 上，而 .splide 的高度**包含分頁點**
   （我們的 CSS 把分頁改成 position: static，它會撐高 .splide），
   所以 top: 50% 算出來的中心比卡片中心低了 15px（實測箭頭 1075、卡片 1060）。
   改成 grid 之後，箭頭與軌道在同一列，align-self: center 就是「對軌道置中」，
   不必去猜分頁點多高。

   注意 data-fc-arrow-pos 只在箭頭開啟時才輸出（PHP 判斷 $config['arrows']），
   所以不會出現「沒有箭頭卻仍有 grid」的狀況，也就不需要 :has()。 */

/* 外側：軌道佔滿整個寬度，箭頭與軌道「共用同一格」並貼齊左右緣。

   v1.9.2 改掉了舊做法。舊版是
       grid-template-columns: gutter minmax(0,1fr) gutter
   —— 箭頭有自己的欄位，卡片因此左右各內縮 45px。使用者看到的「左邊留白」
   就是這 45px：卡片的左緣比前後標題的左緣縮進去，排起來不齊；
   而且 v1.9.1 之後邊界那顆箭頭會被隱藏，第 1 頁左邊就只剩一塊純空白。

   現在 grid 只留一欄，軌道與兩顆箭頭都放在第 1 列第 1 行（grid item 可以重疊），
   軌道拿滿 .fc-slider 的寬度 → 卡片左緣 == 前後元素的左緣、零留白。

   為什麼不把箭頭放到 .fc-slider 的框外（那才是字面上的「軌道外側」）：
   1. 框外的東西會被 div.post-content 與 div.main-container 的 overflow: hidden
      裁掉 —— 實測（probe-arrow-escape.js）往左溢出 30px 的方塊畫出 0 個像素、
      elementFromPoint 也點不到。
   2. 解除那兩層的裁切確實可行（probe-unclip-safety.js：整頁 1957 個元素只有
      post-content／article 各矮 20px，是 margin 塌陷、頁面總高不變），
      但右邊根本沒有空間：probe-side-room.js 掃同一條水平線，輪播右緣 933、
      aside.sidebar-right 從 934 就開始 → 右側可用空白 0px，箭頭會壓在側欄上。
   所以改成「貼齊框緣、壓在卡片上」。

   疊層：箭頭是 grid item，而 z-index 對 grid item 直接生效（不需要 position），
   所以刻意維持 position: static —— 改成 relative 會讓 Splide 的
   left／right／top: 1em／50% 重新生效（1em 對 <button> 是 13.33px），
   實測箭頭會被推移 13.3px、垂直差 238px。 */
.fc-slider[data-fc-arrow-pos="outside"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__track {
    grid-column: 1;
    grid-row: 1;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__arrows {
    display: contents;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__arrow {
    position: static;
    transform: none;
    align-self: center;
    grid-row: 1;
    z-index: 2;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__arrow--prev {
    grid-column: 1;
    justify-self: start;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__arrow--next {
    grid-column: 1;
    justify-self: end;
}

.fc-slider[data-fc-arrow-pos="outside"] .splide__pagination {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
}

/* 上方：箭頭自成第一列並靠右，軌道在第二列。完全不吃卡片寬度。 */
.fc-slider[data-fc-arrow-pos="top"] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px 6px;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__arrows {
    display: contents;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__arrow {
    position: static;
    transform: none;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__arrow--prev {
    grid-column: 2;
    grid-row: 1;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__arrow--next {
    grid-column: 3;
    grid-row: 1;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__track {
    grid-column: 1 / -1;
    grid-row: 2;
}

.fc-slider[data-fc-arrow-pos="top"] .splide__pagination {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
}

/* 下方：軌道在第一列，箭頭與分頁點共用第二列（箭頭分居左右、圓點置中）。
   兩者放同一列是刻意的 —— 關掉分頁點時箭頭仍在原位，不會跳動。 */
.fc-slider[data-fc-arrow-pos="bottom"] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px 8px;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__arrows {
    display: contents;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__arrow {
    position: static;
    transform: none;
    align-self: center;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__arrow--prev {
    grid-column: 1;
    grid-row: 2;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__arrow--next {
    grid-column: 3;
    grid-row: 2;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__track {
    grid-column: 1 / -1;
    grid-row: 1;
}

.fc-slider[data-fc-arrow-pos="bottom"] .splide__pagination {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    align-self: center;
}

/* 分頁點。尺寸沿用 Splide 預設（8px 圓點），其餘都是我們自己的預設：
   未選中 #D2D2D2、選中 #929292、不透明、選中不放大、間距 15px。
   不透明度預設 1，不沿用 Splide 的 0.7 —— 否則畫面上會比色碼淡一階
   （#D2D2D2 @ .7 ≈ #E3E3E3），而 Splide 預設的選中色是白色，
   在淺色底上等於看不見，那正是要換成 #929292 的原因。
   使用者自訂 dot_opacity 時仍完全照舊運作。
   Splide 的 .is-active 只改背景色與 transform，沒有另外指定 opacity，
   所以 --fc-dot-opacity 會同時作用在一般與選中的圓點上，不必再開一組變數。

   間距用容器的 gap，不是加大 margin：Splide 是每顆 margin:3px（相鄰 6px），
   改成 gap 才能讓「兩顆之間剛好 15px」而且容器左右不會多出半個間距。
   .splide__pagination 本來就是 flex（align-items/justify-content: center），gap 直接生效；
   margin 要歸零，否則會變成 15 + 3 + 3 = 21px。 */
.fc-slider .splide__pagination {
    gap: 15px;
}

.fc-slider .splide__pagination__page {
    background: var(--fc-dot-color, #d2d2d2);
    width: var(--fc-dot-size, 8px);
    height: var(--fc-dot-size, 8px);
    margin: 0;
    opacity: var(--fc-dot-opacity, 1);
}

/* 選中只換顏色，不放大。Splide 用 transform: scale(1.4) 表達「選中」，
   在淺色底上會讓相鄰圓點的視覺間距忽大忽小，這裡改成純顏色區分。 */
.fc-slider .splide__pagination__page.is-active {
    background: var(--fc-dot-active-color, #929292);
    transform: none;
}

.fc-slider .splide__pagination__page:hover {
    opacity: var(--fc-dot-opacity-hover, 1);
}

/* 長條形狀：把圓點拉長。放大已經在上一條關掉了，這裡改用加寬來表達「選中」。 */
.fc-slider[data-fc-dot-shape="bar"] .splide__pagination__page {
    width: calc(var(--fc-dot-size, 8px) * 2.6);
    height: calc(var(--fc-dot-size, 8px) * .7);
    border-radius: 50px;
    transition: width .25s ease, background .25s ease;
}

.fc-slider[data-fc-dot-shape="bar"] .splide__pagination__page.is-active {
    width: calc(var(--fc-dot-size, 8px) * 4.5);
}