/* =========================================================================
   LAVUMALL - /assets/css/index/index-layout.css
   V6.0 Index Layout Canonical Shell
   原則：版面寬度只由 .index-layout-shell 控制；圖片比例只由 frame 控制。
   Ambient 暫時完全停用，待 Banner 尺寸確認後再獨立加入。
   ========================================================================= */

/* ---------- 版面邊界：交回既有 .container ---------- */
/*
   index-base.css 的 .container 是唯一外層寬度來源：
   max-width:1200px; margin:0 auto; padding:0 20px;
   這裡絕對不再覆寫 max-width / margin / padding。
*/
#indexLayoutRoot {
    position: relative;
    min-width: 0;
}

#indexLayoutRoot .layout-module {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ---------- Banner / Simple Banner：只處理圖片模組 ---------- */
/*
   V6.2
   1. 不碰 #indexLayoutRoot / .container / 商品列表。
   2. 圖片模組外層使用 width:auto，直接吃 .container 的「內容寬度」，
      避免 100% 與舊規則/盒模型造成左右各多 20px。
   3. 固定比例只由 media frame 決定。
   4. 圖片本身沒有尺寸決定權，只填滿 frame 並 contain。
*/

#indexLayoutRoot .layout-module-banner,
#indexLayoutRoot .layout-module-simple-banner {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

#indexLayoutRoot .layout-module-banner {
    margin-top: 30px;
    margin-bottom: 20px;
}

#indexLayoutRoot .layout-module-simple-banner {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* ---------- 輪播 Banner 展示框 ---------- */
#indexLayoutRoot .index-banner-carousel {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    aspect-ratio: var(--index-media-ratio, 2 / 1);
    overflow: hidden;
    border-radius: 20px;
    background: #f5f5f7;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    box-sizing: border-box !important;
}

#indexLayoutRoot .layout-module-banner:not([data-ratio-mode="free"]) .index-banner-slide {
    display: none;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#indexLayoutRoot .layout-module-banner:not([data-ratio-mode="free"]) .index-banner-slide.active {
    display: block;
}

#indexLayoutRoot .index-banner-link {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    color: inherit;
    text-decoration: none;
}

#indexLayoutRoot .index-banner-frame {
    position: relative;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    box-sizing: border-box !important;
}

#indexLayoutRoot .index-banner-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ---------- 輪播自由比例 ---------- */
#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-carousel {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-slide {
    display: none;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
}

#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-slide.active {
    display: block;
}

#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-link,
#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-frame {
    height: auto !important;
}

#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 85vh;
    margin: 0 auto;
}

/* ---------- Banner dots ---------- */
#indexLayoutRoot .index-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

#indexLayoutRoot .index-banner-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

#indexLayoutRoot .index-banner-dot.active {
    background: #fff;
    transform: scale(1.35);
}

/* ---------- Banner 文案 ---------- */
#indexLayoutRoot .index-banner-frame .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 100%);
}

#indexLayoutRoot .index-banner-frame .hero-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

#indexLayoutRoot .index-banner-frame .hero-text h1 {
    margin-bottom: 12px;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 15px rgba(0,0,0,.6);
}

#indexLayoutRoot .index-banner-frame .hero-text p {
    font-size: 18px;
    color: #e5e5e7;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ---------- 簡易看板展示框 ---------- */
#indexLayoutRoot .index-simple-banner-link {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    color: inherit;
    text-decoration: none;
}

#indexLayoutRoot .index-simple-banner-frame {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    aspect-ratio: var(--index-media-ratio, 2 / 1);
    overflow: hidden;
    border-radius: 20px;
    background: #f5f5f7;
    box-sizing: border-box !important;
}

#indexLayoutRoot .index-simple-banner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ---------- 簡易看板自由比例 ---------- */
#indexLayoutRoot .layout-module-simple-banner[data-ratio-mode="free"] .index-simple-banner-frame {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: visible;
    background: transparent;
}

#indexLayoutRoot .layout-module-simple-banner[data-ratio-mode="free"] .index-simple-banner {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 85vh;
    margin: 0 auto;
}

/* ---------- 其他 Layout 模組 ---------- */
.index-product-module { position: relative; }
.index-layout-spacer { width: 100%; }

.index-text-block {
    margin: 30px 0;
    padding: 30px;
    border-radius: 18px;
    background: #f5f5f7;
    color: #515154;
    line-height: 1.8;
}
.index-text-block h2 { margin-bottom: 10px; color: #1d1d1f; }

.index-video-block { margin: 30px 0; }
.index-video-block video {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 680px;
    border-radius: 20px;
    background: #000;
}

.index-category-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 30px 0;
}
.index-category-links a {
    min-width: 0;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    background: #fff;
    color: #1d1d1f;
    text-decoration: none;
    font-weight: 700;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.index-category-links a:hover {
    border-color: #0071e3;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,113,227,.08);
}
.index-category-links i { color: #0071e3; }

@media (max-width: 992px) {
    .index-banner-dots { bottom: 16px; }
    #indexLayoutRoot .index-banner-frame .hero-text h1 { font-size: 30px; }
    #indexLayoutRoot .index-banner-frame .hero-text p { font-size: 16px; }
    .index-category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .index-text-block { padding: 22px 18px; }
    .layout-module-banner[data-ratio-mode="free"] .index-banner-image,
    .layout-module-simple-banner[data-ratio-mode="free"] .index-simple-banner { max-height: 78vh; }
}

/* =========================================================================
   V8 首頁新版版型模組
   ========================================================================= */
.index-layout-module-title{margin:0 0 18px;font-size:26px;color:#1d1d1f}
.index-layout-empty-media{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px;background:#f5f5f7;color:#a1a1a6;font-size:42px}

/* 分類捷徑 */
#indexLayoutRoot .visual-category-links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin:30px 0}
#indexLayoutRoot .index-category-link-item{display:flex;flex-direction:column;align-items:center;gap:10px;color:#1d1d1f;text-decoration:none;font-weight:700;min-width:var(--category-icon-size,160px)}
#indexLayoutRoot .index-category-link-icon{width:var(--category-icon-size,160px);height:var(--category-icon-size,160px);border-radius:50%;overflow:hidden;background:#f5f5f7;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.05);transition:.2s ease}
#indexLayoutRoot .index-category-link-icon img{width:100%;height:100%;object-fit:cover}
#indexLayoutRoot .index-category-link-icon i{font-size:34px;color:#0071e3}
#indexLayoutRoot .index-category-link-item:hover .index-category-link-icon{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,113,227,.12)}

/* 互動式標籤 */
.index-interactive-tabs{width:100%;max-width:var(--interactive-tabs-width,1000px);margin:30px auto}
.index-interactive-tab-head{display:grid;grid-template-columns:repeat(var(--tab-count,4),minmax(0,1fr));border:1px solid #e5e5e7;border-radius:14px 14px 0 0;overflow:hidden;background:#f5f5f7}
.index-interactive-tab-btn{height:48px;border:0;border-right:1px solid #e5e5e7;background:#f5f5f7;color:#6e6e73;font-weight:700;cursor:pointer}
.index-interactive-tab-btn:last-child{border-right:0}.index-interactive-tab-btn.active{background:#fff;color:#0071e3;box-shadow:inset 0 -3px 0 #0071e3}
.index-interactive-tab-panels{border:1px solid #e5e5e7;border-top:0;border-radius:0 0 14px 14px;overflow:hidden;background:#fff}
.index-interactive-tab-panel{display:none;width:100%;overflow:hidden}.index-interactive-tab-panel.active{display:block}
.index-interactive-tab-panel.ratio-1-1{aspect-ratio:1/1}.index-interactive-tab-panel.ratio-2-1{aspect-ratio:2/1}.index-interactive-tab-panel.ratio-16-9{aspect-ratio:16/9}
.index-interactive-tab-panel>a{display:block;width:100%;height:100%}.index-interactive-tab-panel img{width:100%;height:100%;object-fit:contain;display:block}.index-interactive-tab-panel.ratio-free img{height:auto;max-height:85vh;margin:auto}

/* 互動式輪播看板 */
.index-interactive-carousel{position:relative;margin:34px 0 44px}.index-interactive-carousel-group{display:none}.index-interactive-carousel-group.active{display:block}
.index-interactive-carousel-banner{width:100%;overflow:hidden;border-radius:20px;background:#f5f5f7;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.index-interactive-carousel-banner.ratio-1-1{aspect-ratio:1/1}.index-interactive-carousel-banner.ratio-2-1{aspect-ratio:2/1}.index-interactive-carousel-banner.ratio-16-9{aspect-ratio:16/9}
.index-interactive-carousel-banner>a{display:block;width:100%;height:100%}.index-interactive-carousel-banner img{width:100%;height:100%;object-fit:contain;display:block}.index-interactive-carousel-banner.ratio-free img{height:auto;max-height:85vh;margin:auto}
.index-interactive-carousel-products{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:18px}
.index-interactive-carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}.index-interactive-carousel-dots button{width:8px;height:8px;border:0;border-radius:99px;background:#c7c7cc;padding:0}.index-interactive-carousel-dots button.active{width:24px;background:#0071e3}

/* 分類看板 */
.index-category-board{margin:34px 0;padding:24px;border:1px solid #e5e5e7;border-radius:20px;background:#fff}
.index-category-board-main{width:100%;height:48px;padding:0 14px;border:1px solid #d2d2d7;border-radius:12px;background:#fff;font-weight:700;margin-bottom:18px}
.index-category-board-main-panel{display:none}.index-category-board-main-panel.active{display:block}
.index-category-board-products{margin-bottom:16px}.index-category-board-product-panel{display:none;grid-template-columns:repeat(2,minmax(0,1fr))!important}.index-category-board-product-panel.active{display:grid}
.index-category-board-bars{display:grid;gap:12px}.index-category-board-bar{position:relative;overflow:hidden;width:100%;border:1px solid #e5e5e7;border-radius:14px;background:#f5f5f7 center/cover no-repeat;color:#1d1d1f;font-weight:800;text-align:left;padding:18px;cursor:pointer}
.index-category-board-bar:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.35))}.index-category-board-bar span{position:relative;z-index:1}.index-category-board-bar.active{border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.08)}

/* 行銷活動 */
.index-marketing-module{margin:34px 0;padding:24px;border:1px solid #e5e5e7;border-radius:20px;background:#fff}
.index-marketing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.index-marketing-head h2{margin:7px 0 0;font-size:25px}.index-marketing-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#eef7ff;color:#0071e3;font-size:12px;font-weight:800}.index-marketing-time{font-size:12px;color:#86868b;white-space:nowrap}
.index-marketing-products{grid-template-columns:repeat(4,minmax(0,1fr))!important}.index-flash-countdown{margin-top:16px;padding:12px;border-radius:12px;background:#fff4f2;color:#ff3b30;text-align:center;font-weight:800;letter-spacing:.06em}
.index-addon-flow,.index-gift-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center}.index-campaign-zone{padding:18px;border-radius:16px;background:#f5f5f7}.index-campaign-zone.accent{background:#eef7ff}.index-campaign-zone>strong{display:block;margin-bottom:12px}.compact-two{grid-template-columns:repeat(2,minmax(0,1fr))!important}.index-campaign-arrow{color:#0071e3;font-size:24px}
.index-bundle-callout{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:16px;border-radius:14px;background:#eefaf2;color:#248a3d}.index-bundle-callout strong{font-size:18px}
.index-gift-prize{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:16px;background:#fff7e8;color:#b76e00}.index-gift-prize>i{font-size:32px}.index-gift-prize span{display:flex;align-items:center;gap:8px;color:#515154;font-size:12px}.index-gift-prize img{width:52px;height:52px;border-radius:10px;object-fit:cover}

.index-layout-divider{padding:16px 0}.index-layout-divider span{display:block;width:100%;background:#d2d2d7;border-radius:99px}

@media(max-width:768px){
  #indexLayoutRoot .index-category-link-icon{width:min(var(--category-icon-size,160px),120px);height:min(var(--category-icon-size,160px),120px)}
  .index-interactive-carousel-products,.index-marketing-products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .index-addon-flow,.index-gift-flow{grid-template-columns:1fr}.index-campaign-arrow{transform:rotate(90deg);text-align:center}
  .index-marketing-head{flex-direction:column}.index-marketing-time{white-space:normal}
}


/* =========================================================================
   V9.0 首頁模組一致性：所有模組基底 / 圖片留白改為白色
   ========================================================================= */
#indexLayoutRoot .layout-module {
    background-color: #fff;
}

#indexLayoutRoot .index-banner-carousel,
#indexLayoutRoot .index-banner-frame,
#indexLayoutRoot .index-simple-banner-frame,
#indexLayoutRoot .index-layout-empty-media,
#indexLayoutRoot .index-category-link-icon,
#indexLayoutRoot .index-interactive-tab-panels,
#indexLayoutRoot .index-interactive-tab-panel,
#indexLayoutRoot .index-interactive-carousel,
#indexLayoutRoot .index-interactive-carousel-group,
#indexLayoutRoot .index-interactive-carousel-banner,
#indexLayoutRoot .index-category-board,
#indexLayoutRoot .index-category-board-bar,
#indexLayoutRoot .index-text-block {
    background-color: #fff !important;
}

/* 圖片不符合指定比例時維持 contain，但空白區固定白色。 */
#indexLayoutRoot .index-banner-image,
#indexLayoutRoot .index-simple-banner,
#indexLayoutRoot .index-interactive-tab-panel img,
#indexLayoutRoot .index-interactive-carousel-banner img {
    background-color: #fff;
}

/* 輪播滑動：保留垂直頁面捲動，水平方向交給輪播。 */
#indexLayoutRoot .index-banner-carousel,
#indexLayoutRoot .index-interactive-carousel-banner {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

#indexLayoutRoot .index-banner-carousel.is-swiping,
#indexLayoutRoot .index-interactive-carousel-banner.is-swiping {
    cursor: grabbing;
}

#indexLayoutRoot .index-banner-carousel img,
#indexLayoutRoot .index-interactive-carousel-banner img {
    -webkit-user-drag: none;
    user-drag: none;
}


/* =========================================================================
   V9.1 首頁模組透明化
   目的：
   1. 模組外層不再以白色/灰色遮住 Ambient 背景。
   2. 圖片使用 contain 時，比例不足的空白區完全透明。
   3. 保留商品卡、按鈕、優惠券等「內容元件」自身既有樣式。
   ========================================================================= */

#indexLayoutRoot .layout-module,
#indexLayoutRoot .layout-module-banner,
#indexLayoutRoot .layout-module-simple-banner,
#indexLayoutRoot .layout-module-products,
#indexLayoutRoot .index-product-module,
#indexLayoutRoot .index-text-block,
#indexLayoutRoot .index-video-block,
#indexLayoutRoot .index-category-links,
#indexLayoutRoot .index-interactive-tabs,
#indexLayoutRoot .index-interactive-carousel,
#indexLayoutRoot .index-interactive-carousel-group,
#indexLayoutRoot .index-category-board,
#indexLayoutRoot .index-marketing-module,
#indexLayoutRoot .index-layout-divider,
#indexLayoutRoot .index-layout-spacer {
    background: transparent !important;
    background-color: transparent !important;
}

/* 圖片 / 看板 / 互動模組展示框：比例不足時直接露出 Ambient */
#indexLayoutRoot .index-banner-carousel,
#indexLayoutRoot .index-banner-frame,
#indexLayoutRoot .index-banner-slide,
#indexLayoutRoot .index-simple-banner-frame,
#indexLayoutRoot .index-interactive-tab-panels,
#indexLayoutRoot .index-interactive-tab-panel,
#indexLayoutRoot .index-interactive-carousel-banner,
#indexLayoutRoot .index-layout-empty-media {
    background: transparent !important;
    background-color: transparent !important;
}

/* 圖片本身也不可補白底 */
#indexLayoutRoot .index-banner-image,
#indexLayoutRoot .index-simple-banner,
#indexLayoutRoot .index-interactive-tab-panel img,
#indexLayoutRoot .index-interactive-carousel-banner img {
    background: transparent !important;
    background-color: transparent !important;
}

/* 分類看板外殼與子分類看板本體透明；
   若子分類有設定背景圖，background-image 仍會正常顯示。 */
#indexLayoutRoot .index-category-board,
#indexLayoutRoot .index-category-board-bar {
    background-color: transparent !important;
}

/* 文字模組不再形成整塊底色 */
#indexLayoutRoot .index-text-block {
    box-shadow: none;
}

/* Ambient 投放時避免自由比例模組又被舊規則補背景 */
#indexLayoutRoot .layout-module-banner[data-ratio-mode="free"] .index-banner-carousel,
#indexLayoutRoot .layout-module-simple-banner[data-ratio-mode="free"] .index-simple-banner-frame {
    background: transparent !important;
}


/* =========================================================================
   V9.2 互動模組視覺細修
   - 移除互動輪播看板透明區域的浮雕 / 陰影外框
   - 移除互動式標籤圖片區白色邊框
   - 標籤改為 LAVUMALL 藍色系圓角分頁
   ========================================================================= */

/* 互動式輪播看板：不要任何外框、陰影或浮雕感 */
#indexLayoutRoot .index-interactive-carousel,
#indexLayoutRoot .index-interactive-carousel-group,
#indexLayoutRoot .index-interactive-carousel-banner {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

#indexLayoutRoot .index-interactive-carousel-banner {
    border-radius: 0 !important;
}

/* 圖片本身維持 contain，透明區域直接露出 Ambient */
#indexLayoutRoot .index-interactive-carousel-banner img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 互動式標籤：移除圖片區的白色框線與外殼 */
#indexLayoutRoot .index-interactive-tabs {
    background: transparent !important;
}

#indexLayoutRoot .index-interactive-tab-panels,
#indexLayoutRoot .index-interactive-tab-panel {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

#indexLayoutRoot .index-interactive-tab-panels {
    border-radius: 0 !important;
    overflow: visible;
}

#indexLayoutRoot .index-interactive-tab-panel {
    overflow: hidden;
}

#indexLayoutRoot .index-interactive-tab-panel img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 標籤列：改成獨立膠囊式按鈕，不再像傳統 table tab */
#indexLayoutRoot .index-interactive-tab-head {
    display: grid;
    grid-template-columns: repeat(var(--tab-count,4), minmax(0,1fr));
    gap: 10px;
    padding: 0 0 14px;
    border: 0 !important;
    border-radius: 0;
    overflow: visible;
    background: transparent !important;
}

#indexLayoutRoot .index-interactive-tab-btn {
    position: relative;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(210,210,215,.9) !important;
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    color: #515154;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.045);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

#indexLayoutRoot .index-interactive-tab-btn:last-child {
    border-right: 1px solid rgba(210,210,215,.9) !important;
}

#indexLayoutRoot .index-interactive-tab-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0,113,227,.42) !important;
    background: rgba(255,255,255,.96);
    color: #0071e3;
    box-shadow: 0 7px 18px rgba(0,113,227,.09);
}

#indexLayoutRoot .index-interactive-tab-btn.active {
    border-color: #0071e3 !important;
    background: linear-gradient(180deg,#0a84ff 0%,#0071e3 100%);
    color: #fff;
    box-shadow:
        0 7px 18px rgba(0,113,227,.20),
        inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateY(-1px);
}

/* 移除舊版 active 下方藍線 */
#indexLayoutRoot .index-interactive-tab-btn.active::after {
    content: none !important;
}

@media (max-width: 768px) {
    #indexLayoutRoot .index-interactive-tab-head {
        gap: 7px;
        padding-bottom: 10px;
    }

    #indexLayoutRoot .index-interactive-tab-btn {
        height: 40px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 13px;
    }
}