/*
 * 首頁緊湊化改版（資訊密集度提升）
 * 見 docs/home-redesign/KICKOFF.md
 *
 * 規則以 .home-v2 起頭；商品卡與 chip 這類共用元件寫成 :is(.home-v2, .list-v2, …)，
 * 讓搜尋／分類／商店／系列／成人等列表頁（<main class="list-v2">）、內容庫
 * （.shelf-v2）與商品頁（<main class="product-v2">）套到同一套樣式。
 * 版面規則（卡寬、AI 推薦區、主題推薦）維持 .home-v2 專屬，不影響列表頁的格線。
 * 例外：.class-tag 容器那條「單行橫捲」只給首頁與列表頁的熱門關鍵字列；
 * 商品頁的標籤是導覽入口，要換行顯示，所以只共用膠囊本身的樣式。
 * 載入順序在 pubu.ui.min.css 與 now-reading.css 之後，同權重時以本檔為準。
 */

/* ============================================================
 * 書籍／雜誌／影音首頁：以 .home-v2 共用商品卡、標題列與手機橫滑。
 * .channel-home 只處理這三頁的頁首與留白，不複製卡片樣式。
 * ============================================================ */
.home-v2.channel-home {
    padding-top: 24px;
}

.home-v2.channel-home > .class-title {
    align-items: baseline;
    gap: 8px 16px;
    max-width: none;
    min-height: 0;
    padding: 0;
    text-align: left;
}

.home-v2.channel-home .class-title-title {
    color: var(--g-ink);
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.35;
}

.home-v2.channel-home .class-title-txtInfo {
    margin: 0;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* 舊頁與共用「近期瀏覽」帶 Bootstrap py-*；清掉後，全部沿用首頁的
   20px 模組間距與右側「看更多」，避免上下 padding 重複堆出大片空白。 */
.home-v2.channel-home > .list-border {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .home-v2.channel-home {
        padding-top: 14px;
    }

    .home-v2.channel-home > .class-title {
        flex-direction: column;
        gap: 4px;
    }

    .home-v2.channel-home .class-title-title {
        font-size: 26px;
    }
}

/* ============================================================
 * L1 AI 個人推薦：第一屏主角，卡片為全頁最大
 * ============================================================ */
.home-v2 .home-foryou {
    position: relative;
    margin-top: 12px;
    padding: 14px 16px 16px;
    border: 1px solid #e9e5dd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(35, 32, 28, .05), 0 4px 14px rgba(35, 32, 28, .05);
}

/* 左緣品牌色：標示這是唯一的個人化版位 */
.home-v2 .home-foryou::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: #fb7100;
}

.home-v2 .home-foryou-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}

.home-v2 .home-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #7a746b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-v2 .home-foryou-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* 興趣標籤：topic 權重前三 + 追蹤出版社前二 */
.home-v2 .home-foryou-basis {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}

.home-v2 .home-basis-lead {
    color: #7a746b;
}

.home-v2 .home-basis-tag {
    padding: 1px 8px;
    border-radius: 9px;
    background: #f2efe9;
    color: #4e4941;
}

.home-v2 .home-foryou-more {
    margin-left: auto;
    white-space: nowrap;
}

/* 「看更多」＋「…」選單並排釘右；「…」是控制項等級的水玻璃小方鈕，
   面板錨在鈕的右下（不像語言下拉是 fixed 在 dock 下），配方與 .g-dd 相同。
   選單兩個動作：先收起來（純前端）／不再顯示（寫會員設定），見 aiRecommend.initMenu。 */
.home-v2 .home-foryou-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* pubu.ui 的 .btn{min-height:36px} 會把「看更多」的盒子撐到 36px，「…」鈕置中後就比文字低 8px；
   收回文字高度，讓鈕對齊「看更多」那一行 */
.home-v2 .home-foryou-actions .home-foryou-more {
    min-height: 0;
    height: auto !important;
    line-height: 1.5;
}

.home-v2 .home-foryou-menu {
    position: relative;
    display: flex;
}

.home-v2 .home-foryou-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-control-active);
    box-shadow: inset 0 0 0 1px var(--g-divider), inset 0 1px 0 var(--g-inset-line);
    color: var(--g-muted);
    cursor: pointer;
    transition: background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

.home-v2 .home-foryou-menu-btn:hover,
.home-v2 .home-foryou-menu-btn:focus-visible,
.home-v2 .home-foryou-menu-btn[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), #fff;
    color: var(--g-accent-strong);
    box-shadow: inset 0 0 0 1px var(--g-accent-ring), 0 6px 16px rgba(255, 107, 26, .14);
    transform: translateY(-1px);
}

.home-v2 .home-foryou-menu-btn:active {
    transform: scale(.94);
    transition-duration: .08s;
}

.home-v2 .home-foryou-menu-btn:focus-visible {
    outline: 3px solid var(--g-accent-ring);
    outline-offset: 2px;
}

.home-v2 .home-foryou-menu-dots {
    display: inline-flex;
    gap: 3px;
}

.home-v2 .home-foryou-menu-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.home-v2 .home-foryou-dd {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1032;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 236px;
    padding: 8px;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-panel-surface);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(170%);
    backdrop-filter: blur(var(--g-blur)) saturate(170%);
    box-shadow: inset 0 1px 0 var(--g-inset-line), var(--g-shadow);
    color: var(--g-ink);
    text-align: left;
    transform-origin: top right;
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .home-v2 .home-foryou-dd {
        background: var(--g-surface-fallback);
    }
}

.home-v2 .home-foryou-dd[hidden] {
    display: none;
}

.home-v2 .home-foryou-dd.is-leaving {
    animation: g-dd-out .2s var(--g-ease-in) forwards;
}

.home-v2 .home-foryou-dd-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--g-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

.home-v2 .home-foryou-dd-item:hover,
.home-v2 .home-foryou-dd-item:focus-visible {
    background: var(--g-control-hover);
    color: var(--g-accent-strong);
    transform: translateX(3px);
}

.home-v2 .home-foryou-dd-item:active {
    transform: scale(.97);
    transition-duration: .08s;
}

.home-v2 .home-foryou-dd-item:focus-visible {
    outline: 3px solid var(--g-accent-ring);
    outline-offset: 2px;
}

.home-v2 .home-foryou-dd-item.is-busy {
    opacity: .5;
    cursor: progress;
}

.home-v2 .home-foryou-dd-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.home-v2 .home-foryou-dd-hint {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--g-muted);
}

/* 收起：JS 先把目前高度寫成 inline px，再掛這個 class 收合＋淡出，動畫完移除節點 */
.home-v2 .home-foryou.is-dismissing {
    height: 0 !important;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    pointer-events: none;
    transition: opacity .26s ease,
                transform .32s var(--g-ease-in),
                height .32s var(--g-ease-in),
                margin .32s var(--g-ease-in),
                padding .32s var(--g-ease-in);
}

@media (prefers-reduced-motion: reduce) {
    .home-v2 .home-foryou-dd,
    .home-v2 .home-foryou-dd-item,
    .home-v2 .home-foryou-menu-btn,
    .home-v2 .home-foryou.is-dismissing {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
 * L2 閱讀動態帶：帶走 / 翻閱 / 停留 三區獨立並排
 * 列樣式沿用 now-reading.css（44x62 封面、襯線引句、詳全文）
 * ============================================================ */
.home-v2 .home-activity-row {
    display: grid;
    grid-template-columns: 320px 320px minmax(0, 1fr);
    gap: 24px;
    margin-top: 20px;
}

.home-v2 .home-activity-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-v2 .home-activity-block .list-title {
    margin-bottom: 10px;
    font-size: 20px;
}

/* 三欄等高、各自捲動；不用 flex 撐高，避免引句長短造成三欄高度不一 */
.home-v2 .home-activity-block .reading-activity-list {
    flex: none;
    height: 400px;
    min-height: 0;
    max-height: none;
}

/* ============================================================
 * L3 等權重清單模組
 * 標題 + 看更多 + 單列商品卡，所有模組同一版型與同一高度
 * ============================================================ */
.home-v2 .list-border {
    margin-top: 20px;
}

.home-v2 .list-border .list-title {
    font-size: 20px;
}

/* ============================================================
 * 密度：卡片用固定寬度，每列件數隨可用寬度自動調整
 *
 * Swiper 是 slidesPerView:'auto'，每列件數由這裡的寬度決定。
 * 用百分比會讓視窗越窄卡片越小（1100px 時只剩 110px，書名一行兩個字、
 * 試看按鈕直排），所以改成固定寬度：卡片永遠可讀，件數自己減少。
 * 200px 是行銷指定的卡寬，也讓書名兩行不被截斷。
 * ============================================================ */
@media (min-width: 992px) {
    /* 全站首頁卡片同一個寬度（含 AI 推薦），padding 固定 8px；
       Bootstrap col 預設的 15px 在這個密度下太鬆。 */
    .home-v2 .cover-list .row > .col,
    .home-v2 .home-foryou .cover-list .row > .col {
        flex: 0 0 200px;
        max-width: 200px;
        padding: 8px !important;
    }
}

/* ============================================================
 * 限時特價標：從價格列移到封面
 *
 * 價格列只有一行，標籤放在那裡會把「電子書 NT$xxx」擠掉。
 * 封面外框是固定 141% 的方框、圖片置中，所以整列封面「左上角」的位置一致，
 * 就算封面本身不等高也不會忽高忽低（右下角是收藏鍵、左下角是系列叢書鈕）。
 * 標籤在所有用到這張卡的頁面都會輸出，預設隱藏，只有首頁打開。
 * ============================================================ */
.cover-sale-flag {
    display: none;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-sale-flag{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 4px 0 8px 0;
    background: #d8352b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    box-shadow: 0 2px 6px rgba(35, 32, 28, .22);
    /* 點擊直接落到底下的封面連結，不攔截 hover */
    pointer-events: none;
}

/* 排行榜列表的左上角是 TOP 標，特價標往下讓一行 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .ranking ~ .cover-sale-flag{
    top: 24px;
    border-radius: 0 8px 8px 0;
}

/* 價格列的標籤收掉，「電子書 NT$xxx」獨佔一行 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-price-group .badge-danger{
    display: none;
}

/* ============================================================
 * 卡片內部：窄寬度下不可斷行的元素
 * 這些是 1100px 視窗實際壞掉的地方，固定卡寬後仍加保險。
 * ============================================================ */
:is(.home-v2, .list-v2, .product-v2) .cover-list .btn-tryRead,
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-buy .btn{
    white-space: nowrap;
}

/* 價格列：限時特價標與「電子書」不各自斷行 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-price,
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-price > *{
    white-space: nowrap;
}

/* ============================================================
 * 卡片內部壓實（實機量測：封面上方 16px、標題底 8px、分區上下各 6px、
 * 按鈕列上方 8px、卡片底 16px，加總造成鬆散感）
 * ============================================================ */
:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block{
    margin-top: 4px !important;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-project{
    padding-top: 4px !important;
    padding-bottom: 2px !important;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-name h3{
    margin-bottom: 4px !important;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-others{
    line-height: 1.4;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-price{
    min-height: 0;
    line-height: 1.4;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup{
    margin-top: 6px !important;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn{
    min-height: 32px !important;
    height: 32px;
}

/* 書名固定兩行，讓同一列的出版社、價格、按鈕水平對齊 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-name h3{
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.7em;
    font-size: 13.5px;
    line-height: 1.35;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-others{
    font-size: 12px;
}

/* ============================================================
 * 平板與手機
 * ============================================================ */
@media (max-width: 991.98px) {
    /* 992 以上由上面的固定卡寬規則統一設 padding: 8px，
       這個寬度以下維持 Bootstrap 的左右留白，只壓掉卡片底部 */
    .home-v2 .cover-list .row > .col {
        padding-bottom: 8px !important;
    }

    .home-v2 .home-activity-row {
        display: block;
    }

    .home-v2 .home-activity-block + .home-activity-block {
        margin-top: 16px;
    }

    .home-v2 .home-activity-block .reading-activity-list {
        height: auto;
        min-height: 200px;
        max-height: 320px;
    }
}

@media (max-width: 767.98px) {
    .home-v2 .home-foryou {
        margin-top: 8px;
        padding: 12px 10px 12px;
    }

    .home-v2 .home-foryou-title {
        font-size: 19px;
    }

    /* 興趣標籤在手機收掉（mock 同），標題列只留標題與看全部 */
    .home-v2 .home-foryou-basis {
        display: none;
    }

    /* ---- AI 推薦：3 欄 6 件（mock 手機規則）----
       Swiper 還在，但 wrapper 改成 grid、transform 鎖死，第 7 件起藏掉；
       glassChrome.initMobileLists 會順手把 allowTouchMove 關掉。 */
    .home-v2 .home-foryou .cover-list .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        transform: none !important;
    }

    .home-v2 .home-foryou .cover-list .row > .col {
        flex: none;
        width: auto;
        max-width: none;
    }

    .home-v2 .home-foryou .cover-list .row > .col:nth-child(n+7),
    .home-v2 .home-foryou .cover-list .swiper-button-next,
    .home-v2 .home-foryou .cover-list .swiper-button-prev {
        display: none;
    }

    /* ---- 清單模組：每屏 3.2 張（mock 31%），可橫向滑動 ---- */
    .home-v2 .cover-list .row > .col {
        flex: 0 0 31%;
        max-width: 31%;
        padding: 0 5px 8px !important;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-name h3{
        font-size: 12.5px;
    }

    /* 出版社／作者：pubu.ui 在 ≤640 把 .cover-list .info-block .info-project .info-others 整行 display:none，
       手機商品卡就只剩書名和價格。商品卡 12 個元素缺一不可（KICKOFF 第 2 節），
       這裡以更高特異度開回來、收成 11px 單行，超出就省略號（.text-truncate 由 tag 帶）。 */
    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-block .info-project .info-others{
        display: block;
        font-size: 11px;
        line-height: 1.4;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-price{
        font-size: 12px;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn{
        min-height: 28px !important;
        height: 28px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 12px;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .cover-sale-flag{
        padding: 1px 5px;
        font-size: 10px;
    }

    /* 手機卡片只有 110px 寬（內容庫兩欄約 156px），相框內縮與圓角跟著收 */
    :is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover{
        padding: 4px;
        border-radius: 10px;
    }

    :is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover img{
        border-radius: 5px;
    }

    .home-v2 .home-activity-block .list-title,
    .home-v2 .list-border .list-title {
        font-size: 18px;
    }
}

/* ============================================================
 * L1 Banner：壓低存在感
 * 版位改為一列多張（1600 以上三張），並限制高度。
 * 原本一列 1.9 張、333px 高，佔掉第一屏一半以上。
 * ============================================================ */
.home-main .banner-owl {
    padding-top: 0;
    margin-bottom: 4px;
}

.home-main .banner-owl .owl-carousel .owl-item {
    padding: 0 6px;
}

.home-main .banner-owl .owl-carousel .owl-item img {
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.home-main .banner-owl .owl-nav {
    top: 50%;
}

/* 導覽鈕縮小，不要壓在圖上搶視覺 */
.home-main .banner-owl .owl-carousel .owl-nav button[class*=owl-] {
    --swiper-buttonwidth-size: 34px;
    --swiper-buttonheight-size: 34px;
    --swiper-navigation-size: 20px;
    margin-top: -17px;
    opacity: 0;
    transition: opacity .2s ease;
}

.home-main .banner-owl:hover .owl-carousel .owl-nav button[class*=owl-] {
    opacity: 1;
}

.home-main .banner-owl .owl-dots {
    margin-top: 6px;
}

/* ============================================================
 * 主題閱讀：從深色大卡改為與其他模組同一密度的淺色卡列
 * 原本一張卡佔掉整個視窗寬度的三分之一，且深色底與全頁調性不合。
 * ============================================================ */
.home-v2 .cover-list-theme.bgStyle-dark {
    padding: 0 !important;
    background: transparent !important;
    /* bgStyle-dark 原本把文字設成白色；底色改白後標題會消失，這裡收回 */
    color: #26313c !important;
}

.home-v2 .cover-list-theme .info-slide h5,
.home-v2 .cover-list-theme .info-slide h5 a,
.home-v2 .cover-list-theme .info-slide .text-reset {
    color: #26313c !important;
}

/* pubu.ui.min.css 有
     .cover-list-level.swiper-container .info-slide{min-width:440px;width:33.33%!important;padding:0 8px!important;margin:0!important}
   三個 !important 把寬度、內距、外距全鎖死，所以卡片會整排黏在一起、內部也沒有留白。
   這裡必須同樣用 !important 才蓋得過（選擇器多帶 .swiper-container 提高權重）。
   2026-09-04 定案：卡寬收到 300、封面放大到 88px 讓卡片高一點，卡與卡之間留 14px。 */
.home-v2 .cover-list-theme.swiper-container .info-slide,
.home-v2 .cover-list-theme .info-slide {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 0 !important;
    max-width: 300px !important;
    align-items: flex-start;
    margin: 0 14px 0 0 !important;
    padding: 12px !important;
    border: 1px solid var(--g-border);
    border-radius: 14px;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .08),
                0 4px 14px rgba(45, 55, 64, .08);
    transition: box-shadow var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .home-v2 .cover-list-theme.swiper-container .info-slide,
    .home-v2 .cover-list-theme .info-slide {
        background: var(--g-surface-fallback);
    }
}

.home-v2 .cover-list-theme .info-slide:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 10px 24px rgba(45, 55, 64, .14);
}

/* 封面 88px 寬 → 141% 高 = 124px，卡片連同 12px 內距約 148px 高 */
.home-v2 .cover-list-theme .info-slide > .col-4 {
    flex: 0 0 88px !important;
    width: 88px !important;
    max-width: 88px !important;
    padding: 0 !important;
}

.home-v2 .cover-list-theme .info-slide > .info-block {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 12px !important;
}

/* 封面上緣與文字第一行對齊：cover-list 的 .cover-block 預設有 margin-top:16px */
.home-v2 .cover-list-theme .info-slide .cover-block {
    margin-top: 0 !important;
}

.home-v2 .cover-list-theme .info-slide .badge {
    font-size: 11px;
    font-weight: 600;
    color: #c85800 !important;
    background: #fff3e8 !important;
}

.home-v2 .cover-list-theme .info-slide h5 {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 說明文字改為兩行截斷，取代原本單行 text-truncate */
.home-v2 .cover-list-theme .info-slide .info-text {
    color: #7a746b !important;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 767.98px) {
    .home-v2 .cover-list-theme.swiper-container .info-slide,
    .home-v2 .cover-list-theme .info-slide {
        flex-basis: 262px !important;
        width: 262px !important;
        max-width: 262px !important;
        margin-right: 10px !important;
        padding: 10px !important;
    }
}


/* ============================================================
 * 對照 mock 校正（2026-09-04）
 * ============================================================ */
/* 標題字：mock 用 Noto Serif TC，這是文青感的主要來源 */
.home-v2 .list-title,
.home-v2 .home-foryou-title,
.home-v2 .home-activity-block .list-title {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
}

/* 「看更多」：mock 是 13px 粗體橘字靠右，不是標題旁的大按鈕。
   pubu.ui 的 .list-title+.btn--link{margin-right:-1rem} 是抵銷按鈕內距用的，
   這裡 padding 已歸零，留著會讓看更多凸出容器右緣 16px，一併歸零讓所有模組切齊。 */
.home-v2 .list-border > .d-flex > .btn--link,
.home-v2 .list-border > .d-flex .btn--link.ml-auto,
.home-v2 .home-foryou-more {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.home-v2 .list-border > .d-flex {
    align-items: baseline !important;
    margin-bottom: 6px;
}

/* 「最多人買 / 個人出版」這種帶分類 tab 的清單標頭（.home-tab-head）：
   標題、膠囊 tab、看更多同一條線垂直置中，看更多釘在容器最右緣，與其他清單模組對齊。
   原本 tab 與看更多包在一層 w-md-auto 的內層 wrap，ml-auto 只推得到 wrap 右緣，
   看更多就卡在 tab 旁邊；手機再用 margin-top:-30px 把看更多硬拉回標題那行。
   現在 JSP 攤平成三個兄弟，這裡只負責排版。 */
.home-v2 .list-border > .home-tab-head {
    align-items: center !important;
    flex-wrap: wrap;
}

/* pubu.ui 的 .x-scroll 是手機用的滿版出血列（calc(100% + 30px)、left:-15px），
   放進同一列會把看更多擠出去；桌機改成只包內容、放不下時自己橫向捲。 */
.home-v2 .home-tab-head .btn-group-tab {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    width: auto !important;
    position: static;
    left: auto;
    margin: 0 0 0 16px;
    padding: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.home-v2 .home-tab-head .btn-group-tab::after {
    content: none;
}

.home-v2 .home-tab-head .btn-group-tab::-webkit-scrollbar {
    display: none;
}

.home-v2 .home-tab-head .btn-group-tab .btn {
    flex-shrink: 0;
}

.home-v2 .home-tab-head > .btn--link {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    /* 手機：第一行標題＋看更多（釘右上），tab 列換到第二行滿版出血、可左右滑 */
    .home-v2 .home-tab-head > .btn--link {
        order: 2;
    }

    .home-v2 .home-tab-head .btn-group-tab {
        order: 3;
        flex: 0 0 calc(100% + 30px);
        margin: 6px -15px 0;
        padding: 0 11px !important;
    }
}

/* 熱門關鍵字列：mock 是 30px 高、無上下留白 */
:is(.home-v2, .list-v2) .class-tag{
    padding: 4px 0 6px !important;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

:is(.home-v2, .list-v2) .class-tag::-webkit-scrollbar{
    display: none;
}

:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn{
    margin: 0 8px 0 0 !important;
    height: 30px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 28px;
    border-radius: 15px;
}

/* 熱門關鍵字 chip 與清單模組的分類 tab 一起改琉光水玻璃：
   原本 btn--outline-secondary 是透明底＋灰框，鋪在環境光上會跟底色融在一起。
   未選中：dock 等級 .62 的玻璃膠囊；選中：品牌橘實色（同 .g-chip.is-primary）。
   .btn-group-tab 是「最多人買 / 個人出版」那種切換列，原本選中是深灰實色。 */
:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary{
    border: 1px solid var(--g-border);
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 2px 8px rgba(45, 55, 64, .07);
    color: var(--g-ink);
    transition: background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

/* 熱門關鍵字列鎖 30px 高，行高要跟著收；tab 列維持 Bootstrap 的尺寸 */
:is(.home-v2, .list-v2, .product-v2) .class-tag .btn.btn--outline-secondary{
    line-height: 26px;
}

/* tab 列改膠囊圓角，與 chip 一致 */
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary{
    border-radius: var(--g-radius-pill);
}

:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary:hover,
:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary:focus-visible,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary:hover,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary:focus-visible{
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .84);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 6px 16px rgba(45, 55, 64, .12);
}

:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary:active,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary:active{
    transform: scale(.95);
    transition-duration: .08s;
}

:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary.active,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary.active{
    border-color: transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 60%), var(--g-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 77, 0, .28);
}

:is(.home-v2, .list-v2, .modal, .product-v2) .class-tag .btn.btn--outline-secondary.active:hover,
:is(.home-v2, .list-v2) .btn-group-tab .btn.btn--outline-secondary.active:hover{
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 60%), var(--g-accent-strong);
    color: #fff;
}

/* ============================================================
 * 書封玻璃相框（2026-09-04）
 * 封面本身不動，改在外框 .cover 做一片圓角玻璃：內縮一圈讓玻璃邊露出來，
 * 書封加自己的圓角與投影，看起來像貼在玻璃板上。
 * 玻璃畫在 .cover（原本就是絕對定位的外框），不動 img 的裁切方式。
 * 內容庫（.shelf-v2）的書卡是同一個 .cover-block 結構，相框跟著共用；
 * 上面那些壓實卡片內距的規則不含 .shelf-v2 —— 內容庫的封面比商店大一號，
 * 書名也維持原本的字級。
 * ============================================================ */
:is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover,
.home-v2 .cover-list-theme .cover-block .cover {
    padding: 6px;
    border: 1px solid var(--g-border);
    border-radius: 13px;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    /* 白邊是玻璃的邊，疊在白色卡片上會消失（AI 推薦區底色是 #fff），
       所以再加一道極淡的灰色外環，兩種底色下相框都看得出輪廓 */
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .10),
                0 6px 18px rgba(45, 55, 64, .13);
    overflow: hidden;
    transition: box-shadow var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover,
    .home-v2 .cover-list-theme .cover-block .cover {
        background: var(--g-surface-fallback);
    }
}

/* 組合商品／專輯用 box-shadow 疊出「後面還有幾本」的效果，不能被相框的陰影蓋掉 */
:is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover.cover-group{
    box-shadow: 0 -16px 0 -8px #dee2e6, 0 -32px 0 -16px #F2F4F6,
                inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .10),
                0 6px 18px rgba(45, 55, 64, .13);
}

/* 書封：自己的圓角與投影，浮在玻璃上 */
:is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover img,
.home-v2 .cover-list-theme .cover-block .cover img {
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(35, 32, 28, .26);
}

:is(.home-v2, .list-v2, .shelf-v2, .product-v2) .cover-list .cover-block .cover:hover{
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .14),
                0 10px 26px rgba(45, 55, 64, .2);
}

/* ============================================================
 * 系列叢書多書堆疊（2026-09-14）
 * AI 個人推薦把同一系列收成最新一冊（Solr group.field=bs），商品卡要讓人一眼看出
 * 「這是一套、後面還有」：相框 .cover 掛 .cover-series，用 box-shadow 在右上方疊出兩張
 * 越來越淡、帶細邊的書板，像一疊書斜斜靠著。組合商品 .cover-group 是往正上方疊，
 * 方向不同才分得出「套書」與「系列」。相框自己的玻璃、外環、投影照舊接在後面，
 * hover 只換投影、書板不動。冊數寫在既有的系列膠囊（桌機封面左下 .btn-series、
 * 手機星等下 .info-series）：「系列叢書 · N 冊」由 lokalise.SeriesVolumes 帶參數輸出。
 * 用 box-shadow 而不是 ::before/::after：.cover 是 overflow:hidden 的玻璃相框，
 * 偽元素會被裁掉；box-shadow 畫在盒子外面不受裁切、也不佔版面，四張卡一列的
 * 間距不用改。內容庫 .shelf-v2 的相框畫在 ::before，暫不套（那邊沒有系列群組化）。
 * ============================================================ */
:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block .cover.cover-series {
    /* 書板：每張是「填色 + 外圈 1px」兩道 shadow（填色比外圈小 1px 才有邊線），
       第二張再退一階、更淡。5px 以下在 stage 實機幾乎看不見，6px 才讀得出「一疊」。 */
    --series-plate-step: 6px;
    --series-plate-fill-1: #e6e0d5;
    --series-plate-line-1: #b9b0a2;
    --series-plate-fill-2: #efeae2;
    --series-plate-line-2: #cfc7b9;
    box-shadow:
        inset 0 1px 0 var(--g-inset-line),
        0 0 0 1px rgba(88, 101, 114, .12),
        var(--series-plate-step) calc(var(--series-plate-step) * -1) 0 -1px var(--series-plate-fill-1),
        var(--series-plate-step) calc(var(--series-plate-step) * -1) 0 0 var(--series-plate-line-1),
        calc(var(--series-plate-step) * 2) calc(var(--series-plate-step) * -2) 0 -2px var(--series-plate-fill-2),
        calc(var(--series-plate-step) * 2) calc(var(--series-plate-step) * -2) 0 -1px var(--series-plate-line-2),
        0 6px 18px rgba(45, 55, 64, .13);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block .cover.cover-series:hover {
    box-shadow:
        inset 0 1px 0 var(--g-inset-line),
        0 0 0 1px rgba(88, 101, 114, .16),
        var(--series-plate-step) calc(var(--series-plate-step) * -1) 0 -1px var(--series-plate-fill-1),
        var(--series-plate-step) calc(var(--series-plate-step) * -1) 0 0 var(--series-plate-line-1),
        calc(var(--series-plate-step) * 2) calc(var(--series-plate-step) * -2) 0 -2px var(--series-plate-fill-2),
        calc(var(--series-plate-step) * 2) calc(var(--series-plate-step) * -2) 0 -1px var(--series-plate-line-2),
        0 10px 26px rgba(45, 55, 64, .2);
}

/* 系列膠囊裡的冊數：桌機封面左下那顆 .btn-series 是 pubu.ui 的白底灰邊，
   帶冊數後字變長，字級略收、不換行，寬度上限跟著相框內縮（原本 calc(100% - 56px) 會撞到收藏鍵） */
:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block .cover.cover-series .btn-series {
    max-width: calc(100% - 52px);
    padding: .2rem .55rem;
    font-size: 12px;
    white-space: nowrap;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block .cover.cover-series .btn-series .txt {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 首頁 AI 推薦手機是三欄、卡片只有 110px：書板收到 4px 一階；
   列表頁手機兩欄（約 200px）維持 6px。膠囊仍在星等下方那行（.info-series 規則在下面） */
@media (max-width: 767.98px) {
    .home-v2 .home-foryou .cover-list .cover-block .cover.cover-series {
        --series-plate-step: 4px;
    }
}

/* 內容庫的相框改畫在 ::before（規範 8-①）：雙格式書的「選擇閱讀格式」
   Bootstrap modal 就輸出在 .cover 裡面（bookshelf_list_card.jsp），.cover 一帶
   backdrop-filter 就變成那個 fixed modal 的 containing block —— modal 被困在
   相框裡、長出捲軸；同時也是 stacking context，modal 會被壓在 body 層級的
   遮罩底下。.cover 自己只留內縮與透明邊（保持原本的盒子尺寸），玻璃、外環、
   陰影全搬到 ::before。z-index 用 0 不用 -1：img 是 position:relative，
   ::before 排在它前面就會畫在它底下，不會掉到卡片背景後面。 */
.shelf-v2 .cover-list .cover-block .cover {
    border-color: transparent;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.shelf-v2 .cover-list .cover-block .cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid var(--g-border);
    border-radius: inherit;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .10),
                0 6px 18px rgba(45, 55, 64, .13);
    transition: box-shadow var(--g-dur-state) ease;
    pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .shelf-v2 .cover-list .cover-block .cover::before {
        background: var(--g-surface-fallback);
    }
}

.shelf-v2 .cover-list .cover-block .cover.cover-group {
    box-shadow: 0 -16px 0 -8px #dee2e6, 0 -32px 0 -16px #F2F4F6;
}

.shelf-v2 .cover-list .cover-block .cover:hover {
    box-shadow: none;
}

.shelf-v2 .cover-list .cover-block .cover.cover-group:hover {
    box-shadow: 0 -16px 0 -8px #dee2e6, 0 -32px 0 -16px #F2F4F6;
}

.shelf-v2 .cover-list .cover-block .cover:hover::before {
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .14),
                0 10px 26px rgba(45, 55, 64, .2);
}

/* 主題推薦的封面只有 88px，內縮與圓角跟著收 */
.home-v2 .cover-list-theme .cover-block .cover {
    padding: 4px;
    border-radius: 10px;
}

.home-v2 .cover-list-theme .cover-block .cover img {
    border-radius: 5px;
}

/* 限時特價標貼在書封左上角（相框內縮後它跟著內縮），圓角配合書封 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .cover-sale-flag{
    border-radius: 6px 0 8px 0;
}

/* 主題閱讀的卡寬統一在上面的區塊定義（300px，帶 !important 蓋 pubu.ui 的 33.33%），
   這裡不再重複覆寫，否則兩條規則互相打架。 */

/* 模組上緣分隔線拿掉，mock 沒有 */
.home-v2 .list-border {
    border-top: 0 !important;
}

/* ---- banner：首張貼齊容器左緣，dots 疊在圖上（與 mock 一致） ---- */
.home-v2 .banner-owl {
    position: relative;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.home-v2 .banner-owl .owl-carousel {
    margin: 0 -6px;
    width: auto;
}

.home-v2 .banner-owl .owl-dots {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    margin: 0;
    pointer-events: none;
}

.home-v2 .banner-owl .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.home-v2 .banner-owl .owl-dots .owl-dot.active span {
    width: 16px;
    border-radius: 3px;
    background: #fff;
}

/* ---- 熱門關鍵字列高度收到 40px ---- */
:is(.home-v2, .list-v2, .product-v2) .class-tag h3{
    line-height: 1;
    vertical-align: top;
}

/* ---- 版首刊頭（headBanner）：原本整塊大圖插在新書列之後，mock 沒有這一塊；
        保留版位但不再主宰版面。
        2026-09-04：原本用 max-height:140px + object-fit:cover 壓高度，
        金腰帶那種 6.5:1 的長條 banner（1410x215）會被上下各切掉一截字。
        改成依原比例算高度，只留一道防呆上限並改用 contain，永遠不裁切。 ---- */
.home-v2 > .banner.py-4 {
    padding-top: 12px !important;
    padding-bottom: 4px !important;
}

.home-v2 > .banner.py-4 img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    border-radius: 8px;
}


/* ============================================================
 * 商品卡按鈕改琉光水玻璃（2026-09-04）
 * 試看：原本橘框透明底，鋪在環境光或白卡上都像沒有底；改成控制項等級的
 * 半透明白＋品牌橘細環。加入購物車：品牌橘實色加一道高光，hover 轉深橘。
 * 只動色彩與圓角，尺寸沿用上面的 32px / 手機 28px。
 * ============================================================ */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn--outline-primary{
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-control-active);
    box-shadow: inset 0 0 0 1px var(--g-accent-ring), inset 0 1px 0 var(--g-inset-line);
    color: var(--g-accent-ink);
    font-weight: 600;
    transition: background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn--outline-primary:hover,
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn--outline-primary:focus-visible{
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), #fff;
    color: var(--g-accent-strong);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--g-accent), 0 6px 16px rgba(255, 107, 26, .18);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn--outline-primary:active{
    transform: scale(.96);
    transition-duration: .08s;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn--outline-primary.disabled{
    color: var(--g-muted);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    background: var(--g-control);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart.btn--primary{
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%), var(--g-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(239, 77, 0, .24);
    color: #fff;
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart.btn--primary:hover,
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart.btn--primary:focus-visible{
    background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%), var(--g-accent-strong);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(239, 77, 0, .32);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart.btn--primary:active{
    transform: scale(.96);
    transition-duration: .08s;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart.btn--primary.disabled{
    background: var(--g-control-active);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-muted);
}

/* ============================================================
 * 按鈕列：試看與加入購物車各佔一半
 *
 * pubu.ui 給 .btn-viewread flex:1 1 auto、給 .btn-shoppingcart
 * flex:none + min-width:56px!important，所以試看鈕會吃掉三分之二的寬度，
 * 「試看」兩個字的份量比主要動作（加入購物車）還重。
 * 這裡把兩顆拉成等寬，並把「試看」的文字換成圖示 —— 文字保留在
 * DOM 裡（視覺隱藏）給螢幕閱讀器與既有的 GA data 屬性用。
 * 圖示分兩種：書刊雜誌用對開圖書，影音與專輯用播放。影音的「試看」按鈕沒有
 * 自己的 class（只有 .btn-viewread），所以靠外層 article.show-listItem 判斷
 * ——那個 class 就是商品卡 tag 在 isMediaOrAlbum 時掛上的。
 * ============================================================ */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup {
    display: flex;
    gap: 8px;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-shoppingcart {
    width: 100%;
    min-width: 0 !important;
    margin-left: 0 !important;
}

/* 文字視覺隱藏但留在無障礙樹裡 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread .txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--g-icon-book) center / contain no-repeat;
    mask: var(--g-icon-book) center / contain no-repeat;
}

/* 影音與專輯：整張卡改用播放圖示（.show-listItem 由商品卡 tag 在
   isMediaOrAlbum 時掛在 <article> 上），.btn-play 是免費影音的「立即播放」 */
:is(.home-v2, .list-v2, .product-v2) .cover-list .show-listItem .info-btngroup .btn-viewread::before,
:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.btn-play::before {
    -webkit-mask-image: var(--g-icon-play);
    mask-image: var(--g-icon-play);
}

:is(.home-v2, .list-v2, .product-v2) .cover-list .info-btngroup .btn-viewread.media-stop-new::before {
    -webkit-mask-image: var(--g-icon-pause);
    mask-image: var(--g-icon-pause);
}

/* ============================================================
 * 系列叢書標：手機卡片只有 110px 寬，壓在封面左下的膠囊會摺成兩行「系列／叢書」
 * 又擋住封面。手機改放到星等下面自己一行（.info-series-line 由商品卡 tag 輸出，
 * 每張卡都有，沒有系列時是空的佔位，卡片高度才一致、按鈕列才對得齊）。
 * 不併進星等那一行：五顆星加分數要 86px、標籤要 54px，110px 放不下會互相蓋住。
 * 桌面與其他頁面預設隱藏，封面上的 .btn-series 照舊。
 * ============================================================ */
.info-series-line {
    display: none;
}

@media (max-width: 767.98px) {
    :is(.home-v2, .list-v2, .product-v2) .cover-list .cover-block .btn-series {
        display: none !important;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-series-line{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* 只有這份清單真的出現系列標時才留那一行的高度，
       整份都沒有系列的清單（多數搜尋結果）就不用白白多 20px */
    :is(.home-v2, .list-v2, .product-v2) .cover-list:has(.info-series) .info-series-line {
        min-height: 17px;
        margin-top: 3px;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-series{
        display: inline-flex;
        align-items: center;
        flex: none;
        height: 17px;
        padding: 0 7px;
        border-radius: 9px;
        background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-control-active);
        box-shadow: inset 0 0 0 1px var(--g-accent-ring);
        color: var(--g-accent-ink);
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }

    :is(.home-v2, .list-v2, .product-v2) .cover-list .info-series:active{
        transform: scale(.95);
    }

    /* AI 推薦「看更多」＋「…」：原本跟在標題後面，暱稱一長就被擠到下一行靠右，
       上面多出一整行空白。改把整組 .home-foryou-actions 釘在區塊右上角，與 FOR YOU eyebrow 同一列。 */
    .home-v2 .home-foryou-head {
        position: relative;
    }

    /* 只有 eyebrow 那一行讓位給「看更多」＋「…」，標題仍可用整個寬度，暱稱才不會被擠成兩行 */
    .home-v2 .home-foryou .home-eyebrow {
        padding-right: 104px;
    }

    .home-v2 .home-foryou-actions {
        position: absolute;
        top: -5px;
        right: 0;
        margin: 0;
        gap: 6px;
    }

    .home-v2 .home-foryou-more {
        margin: 0 !important;
        line-height: 1.4;
    }

    .home-v2 .home-foryou-menu-btn {
        width: 24px;
        height: 24px;
    }
}