/*
 * 琉光 Liquid Glass chrome
 * 依《琉光 Liquid Glass — Design Guideline》v1.0 實作，token 與曲線與規範一致。
 *
 * 套用對象：retail header（浮動玻璃 dock）＋ 分類 mega panel。
 * 規範第 8 節鐵律：
 *   1. 承載玻璃的容器不可 isolation:isolate、不可設 z-index
 *   2. 玻璃不可疊玻璃，面板內控制項用半透明實色
 *   3. 不可對 backdrop-filter 做動畫，改動 opacity / transform
 *   4. dock 用 margin 置中，不用 translateX(-50%)（半像素會讓文字模糊）
 *   5. z-index：chrome 1030 / panel 1031 / 下拉 1032 / BS backdrop 1040 / modal 1050
 *   6. 不可把 class 命名成 icon--*，pubu.ui.min.css 有 [class*="icon--"]{background} 萬用選取器
 */

:root {
    --g-ease-spring: cubic-bezier(.22, 1, .36, 1);
    --g-ease-out: cubic-bezier(.2, .8, .2, 1);
    --g-ease-in: cubic-bezier(.4, 0, .8, .2);
    --g-dur-micro: .2s;
    --g-dur-state: .32s;
    --g-dur-move: .42s;
    --g-dur-enter: .46s;
    --g-blur: 28px;
    --g-radius-dock: 24px;
    --g-radius-panel: 28px;
    --g-radius-btn: 15px;
    --g-radius-pill: 999px;
    --g-dock-inset: 14px;
    --g-dock-height: 62px;
    --g-mobile-bottom-clearance: calc(var(--g-dock-height) + var(--g-dock-inset) * 2 + env(safe-area-inset-bottom, 0px));

    --g-accent: #ff6b1a;
    --g-accent-strong: #ef4d00;
    --g-accent-ink: #c84100;
    --g-accent-soft: rgba(255, 107, 26, .14);
    --g-accent-ring: rgba(255, 107, 26, .32);
    --g-ink: #26313c;
    --g-muted: #5f6b78;

    --g-dock-surface: rgba(255, 255, 255, .62);
    --g-panel-surface: rgba(253, 254, 255, .84);
    --g-surface-fallback: rgba(250, 251, 252, .96);
    --g-sheen: rgba(255, 255, 255, .58);
    --g-border: rgba(255, 255, 255, .72);
    --g-inset-line: rgba(255, 255, 255, .86);
    --g-divider: rgba(88, 101, 114, .14);
    --g-control: rgba(255, 255, 255, .26);
    --g-control-hover: rgba(255, 255, 255, .5);
    --g-control-active: rgba(255, 255, 255, .74);
    /* 陰影：大面積柔暈幾乎收掉、接觸陰影加深。
       2026-09-05：底色改純白後，原本 60px/.2 的大暈在白底上糊成一片灰，整個畫面看起來髒
       （暖底時期它跟橘色互為冷暖，更是直接混成濁色）。改成「暈很淡、線很利」之後，
       chrome 是壓在紙上而不是浮在灰霧上。soft 依同一組比例換算（第一層 ×.25、第二層 ×3.75）。 */
    --g-shadow: 0 20px 60px rgba(45, 55, 64, .05), 0 3px 10px rgba(45, 55, 64, .3);
    --g-shadow-soft: 0 10px 30px rgba(45, 55, 64, .035), 0 2px 6px rgba(45, 55, 64, .225);
    --g-scrim: rgba(40, 48, 58, .12);

    /* 底色：純白。
       2026-09-05 定案：環境光 canvas（暖紙底＋三顆漂移光暈）整組拿掉——先是右下的藍
       被判定顯髒，改成企業色 → 白之後仍嫌濃，最後決定整片白。玻璃因此折射的是
       純白＋捲動經過的內容，不再有底圖；--g-ground 留著是因為手機 dock 的購物車
       數字用它描邊（要跟底色同色才切得乾淨）。 */
    --g-ground: #ffffff;

    /* 商品卡按鈕的圖示（用 mask 上色，跟著 currentColor 走） */
    --g-icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E");
    --g-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    --g-icon-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
    --g-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
}

/* ============================================================
 * 底色：純白，沒有 canvas 圖層。
 * glassChrome 只負責在 <html> 掛 g-glass，不再注入任何背景元素。
 * ============================================================ */
html.g-glass body {
    background-color: var(--g-ground) !important;
}

/* ============================================================
 * 頂部浮動玻璃 dock
 * 沿用既有 header 結構：.left / #search-bar / .right 就是三個 dock group
 * ============================================================ */
@media (min-width: 992px) {

    header.nav-desktop {
        top: var(--g-dock-inset) !important;
        right: var(--g-dock-inset);
        left: var(--g-dock-inset);
        width: auto;
        max-width: 1720px;
        margin-inline: auto;
        height: var(--g-dock-height);
        border: 1px solid var(--g-border);
        border-radius: var(--g-radius-dock);
        background:
            linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
            var(--g-dock-surface) !important;
        -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);
        z-index: 1030;
        color: var(--g-ink);
        transition: height var(--g-dur-move) var(--g-ease-spring),
                    box-shadow var(--g-dur-state) ease;
    }

    /* 不支援 backdrop-filter 時退回幾近實色，維持可讀性 */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        header.nav-desktop {
            background: var(--g-surface-fallback) !important;
        }
    }

    header.nav-desktop .navbar {
        height: 100%;
        padding: 0 8px !important;
    }

    header.nav-desktop .container-fluid {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        height: 100%;
    }

    /* Bootstrap 的 .navbar > .container-fluid 是 flex-wrap:wrap：
       視窗一窄（約 1030 以下、右側又有「我要出版」與儲值金時），右側整組會掉到
       第二行，而 dock 是固定 62px 高又不裁切，那一行就會溢出來壓在麵包屑上。
       改成不換行，並讓搜尋膠囊可以被壓縮，右側永遠留在同一行。 */
    header.nav-desktop .left,
    header.nav-desktop .right {
        flex: 0 0 auto;
        height: auto;
        gap: 2px;
    }

    header.nav-desktop #search-bar {
        min-width: 0;
    }

    /* 捲動後收合：62 -> 52，並收起文字標籤 */
    header.nav-desktop.is-compact {
        height: 52px;
        box-shadow: inset 0 1px 0 var(--g-inset-line), var(--g-shadow-soft);
    }

    header.nav-desktop.is-compact .logo img {
        height: 26px;
    }

    header.nav-desktop.is-compact .g-label {
        max-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0;
    }

    /* 收合時圖示鈕不留幽靈寬度 */
    header.nav-desktop.is-compact .icon-txt {
        padding-right: 10px !important;
    }

    header.nav-desktop .logo img {
        height: 30px;
        transition: height var(--g-dur-move) var(--g-ease-spring);
    }

    /* ---- 控制項：半透明實色，不再疊一層玻璃 ---- */
    header.nav-desktop .btn--transparent,
    header.nav-desktop .icon-txt,
    header.nav-desktop #top_cart {
        border-radius: var(--g-radius-pill) !important;
        background: var(--g-control) !important;
        color: var(--g-ink) !important;
        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;
    }

    header.nav-desktop .btn--transparent:hover,
    header.nav-desktop .icon-txt:hover,
    header.nav-desktop #top_cart:hover {
        background: var(--g-control-hover) !important;
        color: var(--g-accent-strong) !important;
        transform: translateY(-1px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 5px 16px rgba(78, 87, 94, .12);
    }

    header.nav-desktop .btn--transparent:active,
    header.nav-desktop .icon-txt:active,
    header.nav-desktop #top_cart:active {
        transform: translateY(0) scale(.92);
        transition-duration: .08s;
    }

    header.nav-desktop .g-label {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width var(--g-dur-move) var(--g-ease-spring),
                    opacity var(--g-dur-state) ease;
    }

    /* ---- 搜尋膠囊：聚焦時加寬 ---- */
    header.nav-desktop #search-bar {
        flex: 1 1 auto;
        max-width: 620px;
        height: 44px;
        margin-inline: auto;
        border: 0 !important;
        border-radius: var(--g-radius-pill) !important;
        background: var(--g-control);
        box-shadow: inset 0 0 0 1px var(--g-divider);
        overflow: hidden;
        transition: max-width var(--g-dur-move) var(--g-ease-spring),
                    background var(--g-dur-state) ease,
                    box-shadow var(--g-dur-state) ease;
    }

    header.nav-desktop #search-bar:focus-within {
        max-width: 720px;
        background: var(--g-control-active);
        box-shadow: inset 0 0 0 1px var(--g-accent-ring), 0 8px 24px rgba(255, 107, 26, .12);
    }

    header.nav-desktop #search-bar .search-inline,
    header.nav-desktop #search-bar .form-control {
        height: 100%;
        border: 0 !important;
        background: transparent !important;
        color: var(--g-ink);
    }

    header.nav-desktop #global-search-btn {
        background: transparent !important;
        color: var(--g-muted) !important;
    }

    header.nav-desktop #global-search-btn:hover {
        color: var(--g-accent-strong) !important;
    }

    header.nav-desktop.is-compact #search-bar {
        height: 36px;
    }

    /* ---- 儲值金與優惠券數字 ---- */
    .g-wallet-amount,
    .g-coupon-count {
        margin-left: 4px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--g-accent-ink);
    }

    /* 尚未取得數字前顯示骨架，不顯示 0 也不顯示上次的值 */
    .g-wallet-amount:empty::after,
    .g-coupon-count:empty::after {
        content: '';
        display: inline-block;
        width: 42px;
        height: 12px;
        border-radius: 6px;
        background: var(--g-divider);
        vertical-align: middle;
    }

    .g-coupon-count:empty::after {
        width: 16px;
    }

    /* ---- 內容避開浮動 dock ---- */
    body .sidebar-content {
        padding-top: calc(var(--g-dock-inset) + var(--g-dock-height) - 60px);
    }

    /* 桌面側欄由 mega panel 取代。
       g-nav-pending 由 header_define_part.jsp 在 <head> 掛上（載入瞬間就藏，
       不然 pubu.ui 的 ready handler 會先把側欄滑進來、內容推右 240px 再收掉）；
       g-mega-ready 是 glassChrome 真的建出 mega panel 之後。
       建不出來時 glassChrome 會拿掉 pending，舊側欄回來當退路。 */
    .g-nav-pending #nav-sidebar.sidebar,
    .g-mega-ready #nav-sidebar.sidebar {
        display: none !important;
    }

    /* 側欄隱藏後，.sidebar-content.show 仍套 padding-left:240px，
       整頁內容會右移 240px（實機量到的「歪一邊」）。 */
    .g-nav-pending .sidebar-content.show,
    .g-mega-ready .sidebar-content.show {
        padding-left: 0 !important;
        transition: none;
    }

    /* 首頁內容欄對齊 dock 的左右邊緣：同一個 inset、同一個上限寬度。
       banner 已移進容器內，跟著容器走，不再單獨對齊（否則會再縮一次 inset）。
       g-nav-pending 也要算：只綁 g-mega-ready 的話，第一次 paint 是 Bootstrap 的
       1440px，mega 建好才跳成 1720px，整頁會先窄後寬閃一下。 */
    .g-nav-pending .home-v2.container,
    .g-mega-ready .home-v2.container {
        width: min(calc(100% - var(--g-dock-inset) * 2), 1720px);
        max-width: 1720px;
        margin-inline: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 「分類」文字：原本 .icon-display 把按鈕鎖成方形圖示鈕，文字高度為 0 */
    header.nav-desktop [data-pubuui-toggle="sidebar"] {
        width: auto !important;
        padding: 0 14px 0 10px !important;
        gap: 6px;
    }

    header.nav-desktop [data-pubuui-toggle="sidebar"] .g-label {
        height: auto;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1;
        vertical-align: middle;
    }

    /* ---- 短版 header（結帳、付款、訂單明細…）----
       只有返回鈕與 logo，做成置中的窄版 dock，不撐滿 1720px。
       內層是 .container（不是 .container-fluid），要自己攤成 flex。 */
    header.nav-desktop.g-short {
        max-width: 720px;
    }

    header.nav-desktop.g-short .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: none;
        height: 100%;
        padding: 0 6px !important;
    }

    header.nav-desktop.g-short .logo {
        margin: 0 !important;
    }

    /* 右側的空白佔位鈕鏡射返回鈕的 mx-lg-3，logo 才會真的置中 */
    header.nav-desktop.g-short .container > .icon-display:last-child {
        margin: 0 1rem;
    }

    /* 短版 layout 沒有 .sidebar-content，內容一樣要避開浮動 dock。
       用 ~ 不用 +：short_header.jsp 的 </header> 後面還跟著一段 <script>，
       相鄰選擇器對不到 #wrap-content，這條規則原本從來沒生效過。 */
    header.g-short ~ #wrap-content {
        padding-top: calc(var(--g-dock-inset) + var(--g-dock-height) - 60px);
    }
}

/* 「分類」鈕的圖示與文字對齊。
   按鈕自己帶 d-xl-block，Bootstrap 的 display:block !important 蓋掉
   .icon-display 的 inline-flex，圖示與文字就各自成行（圖示置中、文字掉到下面），
   gap 也不生效。這裡改回 flex —— 但只能寫在 xl，
   寫進 992 的區塊會連同 d-none 一起蓋掉，1200 以下就會多出一顆按鈕。 */
@media (min-width: 1200px) {
    header.nav-desktop [data-pubuui-toggle="sidebar"] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    header.nav-desktop [data-pubuui-toggle="sidebar"] [class*="icon--"] {
        flex: none;
    }
}

/* ============================================================
 * 分類 mega panel
 * 由 glassChrome.js 從既有的 #nav-sidebar 分類樹建出來
 * ============================================================ */
.g-mega {
    position: fixed;
    top: calc(var(--g-dock-inset) + var(--g-dock-height) + 8px);
    left: max(var(--g-dock-inset), calc((100% - 1720px) / 2));
    width: min(calc(100% - var(--g-dock-inset) * 2), 1180px);
    max-height: calc(100vh - var(--g-dock-inset) - var(--g-dock-height) - 32px);
    z-index: 1031;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    /* 列高要跟著 max-height 收，不然矮螢幕（1280×720 筆電）列被內容撐高，
       rail／body 的 overflow-y 永遠不觸發，超出的內容直接被 panel 裁掉 */
    grid-template-rows: minmax(0, 1fr);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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);
    overflow: hidden;
    transform-origin: top left;
    animation: g-mega-in var(--g-dur-enter) var(--g-ease-spring);
}

.g-mega[hidden] {
    display: none;
}

.g-mega.is-leaving {
    animation: g-mega-out .26s var(--g-ease-in) forwards;
}

@keyframes g-mega-in {
    from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes g-mega-out {
    to { opacity: 0; transform: translate3d(0, -8px, 0) scale(.98); }
}

@keyframes g-rise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ---- 左側類型 rail ---- */
.g-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    border-right: 1px solid var(--g-divider);
    overflow-y: auto;
}

.g-rail-ind {
    position: absolute;
    top: 14px;
    right: 10px;
    left: 10px;
    height: 40px;
    z-index: 0;
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(255, 255, 255, .74), rgba(255, 226, 201, .52));
    box-shadow: inset 3px 0 0 var(--g-accent), 0 7px 20px rgba(108, 72, 44, .09);
    pointer-events: none;
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-rail-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--g-ink);
    font: 500 14px/1 inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-rail-item:hover {
    color: var(--g-accent-strong);
    transform: translateX(3px);
}

.g-rail-item:active {
    transform: scale(.97);
}

.g-rail-item.is-selected {
    color: var(--g-accent-ink);
    font-weight: 700;
}

.g-rail-item .g-caret {
    width: 6px;
    height: 6px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-rail-item.is-selected .g-caret {
    opacity: 1;
    transform: rotate(45deg) translate3d(2px, -2px, 0);
}

/* ---- 右側內容 ---- */
.g-mega-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 20px 16px;
    overflow-y: auto;
}

/* 琉光捲軸：細膠囊、平常半透明，滑過才轉橘。
   Chrome 只要設了 scrollbar-color 就會無視 ::-webkit-scrollbar，所以標準屬性只留給 Firefox */
.g-mega-body::-webkit-scrollbar,
.g-rail::-webkit-scrollbar {
    width: 10px;
}

.g-mega-body::-webkit-scrollbar-track,
.g-rail::-webkit-scrollbar-track {
    margin-block: 12px;
    background: transparent;
}

/* 右上角有關閉鈕，軌道從它下面開始 */
.g-mega-body::-webkit-scrollbar-track {
    margin-top: 52px;
}

.g-mega-body::-webkit-scrollbar-thumb,
.g-rail::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(88, 101, 114, .28);
    background-clip: content-box;
}

.g-mega-body::-webkit-scrollbar-thumb:hover,
.g-rail::-webkit-scrollbar-thumb:hover {
    background-color: var(--g-accent);
}

@supports not selector(::-webkit-scrollbar) {
    .g-mega-body,
    .g-rail {
        scrollbar-width: thin;
        scrollbar-color: rgba(88, 101, 114, .28) transparent;
    }
}

.g-mega-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.g-mega-head h3 {
    flex: none;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    white-space: nowrap;
}

.g-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.g-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--g-radius-pill);
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
    font-size: 13px;
    text-decoration: none;
    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;
}

.g-chip:hover {
    background: var(--g-control-hover);
    color: var(--g-accent-strong);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 5px 14px rgba(78, 87, 94, .12);
}

.g-chip:active {
    transform: scale(.94);
}

.g-chip.is-primary {
    background: var(--g-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 77, 0, .28);
}

.g-chip.is-primary:hover {
    background: var(--g-accent-strong);
    color: #fff;
}

.g-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 22px;
}

/* 逐項浮現，26ms 階梯（規範 6.3） */
.g-group {
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 26ms);
}

.g-group-title {
    display: inline-block;
    padding: 4px 0;
    color: var(--g-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color var(--g-dur-state) ease;
}

.g-group-title:hover {
    color: var(--g-accent-strong);
    text-decoration: none;
}

.g-kids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 8px;
    margin-top: 2px;
}

.g-kids a {
    overflow: hidden;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.9;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: color var(--g-dur-micro) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-kids a:hover {
    color: var(--g-accent-strong);
    text-decoration: none;
    transform: translateX(2px);
}

.g-flat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.g-flat .g-chip {
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 26ms);
}

/* ---- Pubook 展示版位 ----
 * Pubook 這一層只有三個連結，右半邊本來整片空著。
 * 卡片語彙照抄活動頁 /campaign/ebook/pubook.html 的 pubook-productGroup：
 * 深色情境照打底、白字文案在上、裝置去背圖沉在卡片底部並切出去一點。
 * 圖片由 glassChrome.loadDeferredImages 在面板展開時才載入。 */
.g-pubook {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 230px;
    gap: 12px;
    margin-top: 2px;
}

.g-pubook-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #262b31;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(45, 55, 64, .16);
    transition: transform var(--g-dur-state) var(--g-ease-spring),
                box-shadow var(--g-dur-state) ease;
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 26ms);
}

.g-pubook-card:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 34px rgba(45, 55, 64, .26);
}

.g-pubook-card:active {
    transform: scale(.98);
    transition-duration: .08s;
}

.g-pubook-card--hero {
    grid-column: span 2;
    grid-row: span 2;
}

/* 情境照偏亮，壓一點亮度白字才站得住 */
.g-pubook-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.84);
}

.g-pubook-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px 0;
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.g-pubook-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

/* 活動頁的 Pubook 字標用 Inknut Antiqua，字型沒下載到就退回襯線 */
.g-pubook-word {
    font-family: "Inknut Antiqua", "Noto Serif TC", Georgia, serif;
    font-weight: 300;
}

.g-pubook-spec {
    margin-top: 3px;
    font-family: "Noto Serif TC", serif;
    font-size: 11px;
    letter-spacing: .14em;
    opacity: .92;
}

.g-pubook-slogan {
    margin-top: 9px;
    padding: 1px 8px;
    border-left: 2px solid rgba(255, 255, 255, .9);
    border-right: 2px solid rgba(255, 255, 255, .9);
    font-size: 12.5px;
    letter-spacing: .08em;
}

.g-pubook-shot {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    z-index: 1;
    width: 56%;
    margin-inline: auto;
}

/* 主打卡是橫式的，文案靠左置中、裝置放右邊，才不會上半部空一大塊 */
.g-pubook-card--hero .g-pubook-copy {
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    max-width: 52%;
    padding: 0 0 0 30px;
    text-align: left;
}

.g-pubook-card--hero .g-pubook-name {
    font-size: 27px;
}

.g-pubook-card--hero .g-pubook-spec {
    margin-top: 6px;
    font-size: 13px;
}

.g-pubook-card--hero .g-pubook-slogan {
    margin-top: 16px;
    font-size: 15px;
}

.g-pubook-card--hero .g-pubook-shot {
    right: -2%;
    bottom: -14px;
    left: auto;
    width: 52%;
}

/* ============================================================
 * mega panel 展示版位：排行榜／閱讀頻道／報紙／影音／成人（glassShowcase.js）
 * 這三個頂層分類只有一層連結，右半邊本來整片空著。
 * 資料在面板展開時才打 API，畫之前先放骨架；三種版型都吃同一包
 * boards[].items[] JSON。鐵律：內容層是紙卡不套玻璃，只有排行榜舞台是
 * 深色情境底（封面模糊成光暈），與 Pubook 展示卡同一語彙。
 * 封面沿橢圓軌道轉、永遠正面朝前，細節見「排行榜舞台」段首。
 * ============================================================ */
.g-pane {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.g-pane[hidden] {
    display: none;
}

.g-show {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 2px;
}

.g-show[hidden] {
    display: none;
}

/* 骨架：等 API 的那 200ms 先有東西在呼吸 */
.g-show-skel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.g-show-skel span {
    height: 120px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .085), rgba(0, 0, 0, .04));
    background-size: 200% 100%;
    animation: g-skel 1.3s linear infinite;
    animation-delay: calc(var(--i, 0) * 80ms);
}

.g-show-skel--hot span:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: auto;
}

@keyframes g-skel {
    to { background-position: -200% 0; }
}

/* ---- 排行榜舞台 ----
   12 本封面繞成一個從斜上方看的轉盤（glassShowcase.setPhase 每一幀算每本的 translate3d 與 opacity），
   封面永遠正面朝前，正面那本 z=0、後排往後退並抬高，.g-hot-ring 的 preserve-3d 讓後排被前排遮住。
   --p 是離正面幾格（點旁邊的封面就轉 --p 格）。 ---- */
.g-hot {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr);
    gap: 14px;
    min-height: 400px;
}

.g-hot-stage {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #1d2126;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 10px 28px rgba(45, 55, 64, .18);
    /* 封面區從 18% 起：後排抬高後頂到舞台上緣約 40px 處，正面那本底下離文案還有 45px */
    --fan-top: 18%;
    --fan-h: 226px;
    /* 舞台可以左右撥（glassShowcase.bindDrag）：只交出水平手勢，垂直仍給 sheet 捲 */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.g-hot-stage.is-dragging {
    cursor: grabbing;
}

.g-hot-stage.is-dragging .g-hot-cov {
    pointer-events: none;
}

/* 第一名封面模糊放大當背景光暈，慢速漂移 */
.g-hot-aura {
    position: absolute;
    inset: -12%;
    z-index: 0;
}

/* 兩層疊著交叉淡入淡出（glassShowcase.setAura），轉盤停定才換圖 */
.g-hot-aura img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(38px) saturate(1.6) brightness(.72);
    transform: scale(1.15);
    opacity: 0;
    animation: g-aura-drift 18s ease-in-out infinite alternate;
    transition: opacity .9s ease;
}

.g-hot-aura img.is-on {
    opacity: 1;
}

.g-hot-stage.is-switching .g-hot-aura img.is-on {
    opacity: .35;
}

@keyframes g-aura-drift {
    from { transform: translate3d(-2%, -3%, 0) scale(1.15); }
    to   { transform: translate3d(3%, 4%, 0) scale(1.28); }
}

/* 底部壓暗，文案才站得住 */
.g-hot-stage::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    z-index: 1;
    background: linear-gradient(to top, rgba(10, 12, 16, .94), rgba(10, 12, 16, .55) 45%, rgba(10, 12, 16, 0));
    pointer-events: none;
}

.g-hot-fan {
    position: absolute;
    top: var(--fan-top);
    right: 0;
    left: 0;
    z-index: 2;
    height: var(--fan-h);
    /* 透視距離要跟 glassShowcase.PERSPECTIVE 一致，JS 用它算左右鄰居投影後的位置 */
    perspective: 900px;
    /* 後排抬高後會超出封面區上緣，交給 .g-hot-stage 的 overflow 裁 */
    overflow: visible;
}

/* 轉盤：只負責 preserve-3d 的深度排序，位置全在每本封面的 inline transform 上 */
.g-hot-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.g-hot-cov {
    position: absolute;
    top: 0;
    left: 50%;
    width: 156px;
    height: 222px;
    margin-left: -78px;
    border-radius: 8px;
    overflow: hidden;
    background: #2a3037;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
    /* transform／opacity 由 JS 每幀寫 inline，這裡不掛 transition（換格位要瞬間跟手） */
    will-change: transform, opacity;
    transition: box-shadow var(--g-dur-state) ease;
}

/* 旁邊的封面是「轉到正面」的鈕，正面那本才是進商品頁的連結 */
.g-hot-cov:not(.is-center) {
    cursor: pointer;
}

/* 進場動畫放內層：純 opacity/translate 走 compositor，
   外層的 transform 含 var() 只能在主執行緒算，不適合當 keyframe */
.g-hot-cov-body {
    position: absolute;
    inset: 0;
    display: block;
    /* backwards：跑完就交還 transform，hover 的縮放才接得上 */
    animation: g-cov-in .55s var(--g-ease-spring) backwards;
    animation-delay: calc(var(--ad, 0) * 70ms);
}

.g-hot-cov img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--g-dur-state) var(--g-ease-spring);
}

/* 滑過：封面在框裡微放大（.g-hot-cov 有 overflow:hidden，會把 3D 壓平，不能再往前推） */
.g-hot-cov:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .45);
}

.g-hot-cov:hover img {
    transform: scale(1.05);
}

/* 第一名：發光 + 光澤反覆掃過 */
.g-hot-cov.is-center {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 34px rgba(255, 138, 56, .5);
}

.g-hot-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(20, 22, 26, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.g-hot-cov.is-center .g-hot-rank {
    background: linear-gradient(135deg, #ffd66b, #ff7a1a);
    color: #3a1d00;
    animation: g-pop .6s var(--g-ease-spring) .25s both;
}

.g-hot-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%);
    transform: translateX(-130%);
    pointer-events: none;
}

.g-hot-cov.is-center .g-hot-sheen {
    animation: g-sheen 3.4s ease-in-out .6s infinite;
}

@keyframes g-sheen {
    0%        { transform: translateX(-130%); }
    38%, 100% { transform: translateX(130%); }
}

@keyframes g-cov-in {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.82);
    }
}

@keyframes g-pop {
    from { opacity: 0; transform: scale(.35); }
}

.g-hot-stage.is-switching .g-hot-cov {
    opacity: 0 !important;
    transition: opacity .18s ease;
}

.g-hot-caption {
    position: absolute;
    right: 22px;
    bottom: 40px;
    left: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
}

.g-hot-stage.is-switching .g-hot-caption {
    opacity: 0;
}

.g-hot-kicker {
    font-size: 12px;
    letter-spacing: .14em;
    opacity: .85;
}

.g-hot-title {
    display: -webkit-box;
    overflow: hidden;
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.g-hot-author {
    font-size: 12.5px;
    opacity: .82;
}

.g-hot-caption .g-hot-more {
    align-self: flex-start;
    margin-top: 8px;
}

/* 左右旋轉鈕：舞台上的玻璃圓鈕，垂直對齊封面扇的中線 */
.g-hot-arrow {
    position: absolute;
    top: calc(var(--fan-top) + var(--fan-h) / 2);
    z-index: 4;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 6px 18px rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

.g-hot-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-30%, -50%) rotate(-135deg);
}

.g-hot-arrow--prev {
    left: 12px;
}

.g-hot-arrow--next {
    right: 12px;
}

.g-hot-arrow--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.g-hot-arrow:hover {
    background: rgba(255, 255, 255, .34);
    transform: translateY(-50%) scale(1.06);
}

.g-hot-arrow:active {
    transform: translateY(-50%) scale(.92);
    transition-duration: .08s;
}

.g-hot-dots {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.g-hot-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: width var(--g-dur-move) var(--g-ease-spring), background var(--g-dur-state) ease;
}

.g-hot-dot.is-current {
    width: 22px;
    background: #fff;
}

/* 榜單清單：滑過就換舞台 */
.g-hot-boards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.g-hot-board {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border: 0;
    border-radius: 14px;
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
    text-align: left;
    cursor: pointer;
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 40ms);
    transition: transform var(--g-dur-micro) var(--g-ease-out),
                background var(--g-dur-state) ease,
                box-shadow var(--g-dur-state) ease;
}

.g-hot-board:hover {
    background: var(--g-control-hover);
    transform: translateX(4px);
}

.g-hot-board.is-current {
    background: linear-gradient(100deg, rgba(255, 255, 255, .92), rgba(255, 226, 201, .72));
    box-shadow: inset 3px 0 0 var(--g-accent), 0 8px 22px rgba(239, 77, 0, .14);
}

.g-hot-board-stack {
    position: relative;
    flex: none;
    width: 60px;
    height: 44px;
}

.g-hot-board-stack img {
    position: absolute;
    top: calc(var(--s, 0) * 2px);
    left: calc(var(--s, 0) * 13px);
    z-index: calc(3 - var(--s, 0));
    width: 30px;
    height: 41px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
    transform: rotate(calc(var(--s, 0) * 4deg - 4deg));
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-hot-board:hover .g-hot-board-stack img,
.g-hot-board.is-current .g-hot-board-stack img {
    transform: rotate(calc(var(--s, 0) * 7deg - 7deg)) translateY(-2px);
}

.g-hot-board-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.g-hot-board-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
}

.g-hot-board-top {
    overflow: hidden;
    color: var(--g-muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 頻道牆 ---- */
.g-ch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.g-ch-card {
    --hue: 20;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 216px;
    padding: 12px 12px 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(45, 55, 64, .12), inset 0 0 0 1px rgba(0, 0, 0, .04);
    color: var(--g-ink);
    text-decoration: none;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    transition: transform var(--g-dur-state) var(--g-ease-out), box-shadow var(--g-dur-state) ease;
}

.g-ch-card:hover {
    color: var(--g-ink);
    text-decoration: none;
    box-shadow: 0 18px 40px hsla(var(--hue), 70%, 45%, .28), inset 0 0 0 1px rgba(0, 0, 0, .04);
}

/* 每個頻道一個色相的光暈，跟著游標走 */
.g-ch-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at var(--gx, 72%) var(--gy, 18%),
                hsla(var(--hue), 85%, 72%, .55),
                hsla(calc(var(--hue) + 40), 85%, 80%, .25) 40%,
                transparent 72%);
    animation: g-aura-drift 14s ease-in-out infinite alternate;
}

.g-ch-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.g-ch-logo,
.g-ch-mono {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.g-ch-logo {
    background: #fff;
    object-fit: contain;
}

.g-ch-mono {
    display: grid;
    place-items: center;
    background: hsl(var(--hue), 70%, 45%);
    color: #fff;
    font-weight: 700;
}

.g-ch-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.g-ch-name b {
    overflow: hidden;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-ch-name small {
    color: var(--g-muted);
    font-size: 11px;
}

/* 最新三本疊成扇、慢速浮動；滑過整把打開 */
.g-ch-fan {
    position: relative;
    z-index: 1;
    flex: 1;
    margin-top: 8px;
    perspective: 700px;
}

.g-ch-fan img {
    position: absolute;
    bottom: -16px;
    left: 50%;
    z-index: calc(3 - var(--p, 0));
    width: 86px;
    height: 120px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
    transform: translateX(calc(-50% + (var(--p, 0) - 1) * 26px))
               rotate(calc((var(--p, 0) - 1) * 9deg))
               translateY(calc(var(--p, 0) * 4px));
    transform-origin: bottom center;
    animation: g-float 5s ease-in-out infinite;
    animation-delay: calc(var(--p, 0) * -1.3s);
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-ch-card:hover .g-ch-fan img {
    transform: translateX(calc(-50% + (var(--p, 0) - 1) * 60px))
               rotate(calc((var(--p, 0) - 1) * 6deg))
               translateY(-12px)
               scale(1.04);
    animation-play-state: paused;
}

@keyframes g-float {
    0%, 100% { margin-bottom: 0; }
    50%      { margin-bottom: 7px; }
}

/* ---- 報攤 ---- */
/* 報攤佔滿整個面板高度：卡片寬度隨面板分五等分，封面用比例撐高，整排垂直置中 */
.g-show--newspaper {
    display: flex;
}

.g-np {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 16px;
    width: 100%;
    margin: auto 0;
    padding: 12px 0 8px;
}

.g-np-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 4 * 16px) / 5);
    max-width: 200px;
    color: var(--g-ink);
    text-decoration: none;
    transform-style: preserve-3d;
    animation: g-deal .7s var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.g-np-card:hover {
    color: var(--g-ink);
    text-decoration: none;
}

@keyframes g-deal {
    from {
        opacity: 0;
        transform: translate3d(-40px, 30px, 0) rotate(-8deg) scale(.9);
    }
}

.g-np-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 26px rgba(45, 55, 64, .22);
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s var(--g-ease-out), box-shadow var(--g-dur-state) ease;
}

.g-np-card:hover .g-np-cover {
    box-shadow: 0 22px 44px rgba(45, 55, 64, .3), 0 0 0 2px rgba(239, 77, 0, .35), 0 0 34px rgba(239, 77, 0, .28);
}

.g-np-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.g-np-sheen {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .5), transparent 45%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.g-np-card:hover .g-np-sheen {
    opacity: 1;
}

/* 日期章：發牌後才蓋上去 */
.g-np-date {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 44px;
    padding: 4px 0 5px;
    border-radius: 12px;
    background: var(--g-accent);
    color: #fff;
    box-shadow: 0 6px 14px rgba(239, 77, 0, .35);
    animation: g-pop .5s var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 90ms + 320ms);
}

.g-np-date b {
    font-size: 18px;
    line-height: 1;
}

.g-np-date small {
    font-size: 10px;
    opacity: .9;
}

.g-np-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.g-np-issue {
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: var(--g-muted);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 唱片行（影音） ----
 * 三排方形封面（熱門／最新／免費）各自橫向捲。每張封面後面藏一張 CSS 畫的黑膠，
 * 平常露出一點點當暗示，滑過整張滑出來旋轉、封面上浮發光、浮出播放鍵。
 * 黑膠的位移與旋轉分兩層（外層 translate、內層 rotate），transition 與 animation 才不打架。 */
.g-md {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.g-md-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.g-md-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 架子左右鈕：只在有滑鼠的裝置顯示，手機直接手指滑。
   類名刻意不含「btn--」：pubu.ui 的 [class*=btn--] 會給 min-width:80px（部署後鈕就變寬條） */
.g-md-nav {
    display: none;
    gap: 4px;
    order: 3;
}

@media (hover: hover) {
    .g-md-nav {
        display: inline-flex;
    }
}

.g-md-arrow {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
    cursor: pointer;
    transition: background var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-md-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translate(-30%, -50%) rotate(-135deg);
}

.g-md-arrow-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.g-md-arrow:hover {
    background: var(--g-control-hover);
    color: var(--g-accent-strong);
}

.g-md-arrow:active {
    transform: scale(.9);
}

.g-md-head b {
    font-size: 14px;
    font-weight: 700;
}

.g-md-more {
    order: 2;
    margin-left: auto;
    color: var(--g-accent-strong);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.g-md-more:hover {
    color: var(--g-accent-strong);
    text-decoration: underline;
}

/* 一次露出 --n 張（桌機 6.5、平板 4.5、手機 3.5），最後那半張暗示可以滑；
   卡寬用架子寬度反算，封面用 aspect-ratio 撐正方形 */
.g-md-shelf {
    --n: 6.5;
    --gap: 14px;
    display: flex;
    gap: var(--gap);
    padding: 6px 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.g-md-shelf::-webkit-scrollbar {
    display: none;
}

.g-md-tile {
    position: relative;
    flex: none;
    width: calc((100% - (var(--n) - .5) * var(--gap)) / var(--n));
    scroll-snap-align: start;
    color: var(--g-ink);
    text-decoration: none;
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.g-md-tile:hover {
    color: var(--g-ink);
    text-decoration: none;
}

.g-md-disc {
    position: absolute;
    top: 4px;
    left: 0;
    z-index: 0;
    width: calc(100% - 8px);
    aspect-ratio: 1 / 1;
    transform: translateX(10%);
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-md-disc i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle, #f4f4f4 0 7px, var(--g-accent) 8px 13px, #1a1a1a 14px 16px,
                        #2c2c2c 17px, #161616 19px, #2a2a2a 21px, #151515 23px, #262626 25px,
                        #171717 27px, #2b2b2b 29px, #181818 31px, #242424 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.g-md-tile:hover .g-md-disc {
    transform: translateX(46%);
}

.g-md-tile:hover .g-md-disc i {
    animation: g-spin 2.2s linear infinite;
}

@keyframes g-spin {
    to { transform: rotate(360deg); }
}

.g-md-cover {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
    transition: transform var(--g-dur-state) var(--g-ease-spring), box-shadow var(--g-dur-state) ease;
}

.g-md-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.g-md-tile:hover .g-md-cover {
    transform: translateY(-6px) scale(1.04) rotate(-2deg);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .3), 0 0 26px rgba(239, 77, 0, .35);
}

/* 播放鍵：白圓底 + 橘三角 */
.g-md-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .22);
    opacity: 0;
    transition: opacity var(--g-dur-micro) ease;
}

.g-md-play::before {
    content: '';
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transform: scale(.6);
    transition: transform var(--g-dur-state) var(--g-ease-spring);
}

.g-md-play::after {
    content: '';
    position: absolute;
    margin-left: 4px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--g-accent);
}

.g-md-tile:hover .g-md-play {
    opacity: 1;
}

.g-md-tile:hover .g-md-play::before {
    transform: none;
}

.g-md-title {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.g-md-sub {
    display: block;
    overflow: hidden;
    color: var(--g-muted);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 平板：面板寬度不夠放舞台＋清單兩欄，清單改成舞台底下一排橫滑 */
@media (max-width: 991.98px) {
    .g-hot {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 10px;
    }

    .g-hot-stage {
        height: 320px;
    }

    .g-hot-boards {
        flex-direction: row;
        gap: 8px;
        padding-bottom: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .g-hot-boards::-webkit-scrollbar {
        display: none;
    }

    .g-hot-board {
        width: 210px;
    }
}

/* ---- 散落書堆（成人） ----
 * 免費閱讀（最新）與五個分類（最多人買）共六座同款展台 .g-veil-shelf，3×2 全部展開、不摺疊、不分主從、不放書名。
 * 每座一堆 .g-veil-pile：五本封面像隨手堆在桌上，位置由 glassShowcase.ADULT_PILES 的六種散落方式寫成每本的
 *   --x（中心位置）--b（離桌面多高，越遠越高）--r（歪幾度）--sc（深度縮放）--z --dim（越遠越暗）--par（視差幅度）。
 * 三層各管一件事，transform 不互搶：
 *   a.g-veil-cov      靜止的位置與視差（--px/--py 由 bindPile 寫在書堆上），也是唯一吃滑鼠的範圍；
 *   .g-veil-pop       拉出來／壓下去。不吃滑鼠，所以放大不會改變 hover 判定、不會抖。被拉出來的那本（.is-focus）
 *                   轉正、往前落到桌面前緣、放大到固定的 1.4 倍（除以 --sc，遠近都拉到一樣大）；同堆其他的縮小、下沉、變暗；
 *   .g-veil-cov-body  裁切、進場（落到桌上）、閒置微光與除霧光帶。
 * 呼吸光暈 .g-veil-glow 在 pop 裡、封面後面：一塊模糊的色塊做 opacity＋scale 的呼吸（compositor 動畫），只有 is-focus 才亮。
 * 遮罩：.g-veil.is-masked 時每張封面的 img 模糊放大（放大是為了藏模糊後的透明邊），上面蓋 .g-veil-frost 霜面，
 *   不放任何文字／數字；切換時依 --ci 逐張除霧／結霜，::after 的光帶在 is-defrosting／is-frosting 那 1.2 秒改成快掃。
 *   模糊用的是 img 的 filter，不是 backdrop-filter——mega panel 本身已經是玻璃，裡面不能再疊玻璃；開關列同理只用半透明底色。
 * 偏好與搜尋頁、首頁 AI 推薦的敏感商品開關共用（glassShowcase.SENSITIVE_KEY）。
 * 命名：前綴是 g-veil（遮罩），刻意不用 adult 的縮寫——廣告阻擋器的 EasyList 有通用規則 ##.g-ad，
 *   第一次上 stage 時整塊版位在裝了阻擋器的瀏覽器上被 display:none（DOM 有畫、量到的尺寸全是 0）。
 *   新 class 不要出現 ad／ads／banner／sponsor 這類字樣，上線前拿 easylist.txt 對一次。 ---- */
/* 面板高度由左邊 rail 決定，展台比它矮的時候整組垂直置中 */
.g-show--adult {
    display: flex;
}

.g-veil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: auto 0;
}

.g-show-skel--adult {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.g-show-skel--adult span {
    height: 208px;
    border-radius: 18px;
}

/* 遮罩開關列 */
.g-veil-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
}

.g-veil-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 40px;
    padding: 0 6px 0 12px;
    border: 0;
    border-radius: var(--g-radius-pill);
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--g-dur-state) ease, color var(--g-dur-state) ease,
                box-shadow var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-veil-switch:hover {
    background: var(--g-control-hover);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 5px 14px rgba(78, 87, 94, .12);
    transform: translateY(-1px);
}

.g-veil-switch:focus-visible {
    outline: 2px solid var(--g-accent-ring);
    outline-offset: 2px;
}

.g-veil-switch[aria-checked="true"] {
    color: var(--g-accent-strong);
}

.g-veil-switch-label {
    overflow: hidden;
    color: var(--g-ink);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-veil-eye {
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.g-veil-eye-lid,
.g-veil-eye-iris {
    transform-box: fill-box;
    transform-origin: center;
}

.g-veil-eye-iris {
    fill: currentColor;
    stroke: none;
    transform: scale(.55);
    transition: transform var(--g-dur-move) var(--g-ease-spring);
}

.g-veil-switch[aria-checked="true"] .g-veil-eye-iris {
    transform: none;
}

.g-veil-eye-slash {
    stroke-dasharray: 43;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--g-dur-move) var(--g-ease-out);
}

.g-veil-switch[aria-checked="true"] .g-veil-eye-slash {
    stroke-dashoffset: 43;
}

/* 切換那一下眨一次眼 */
.g-veil:is(.is-defrosting, .is-frosting) .g-veil-eye-lid {
    animation: g-veil-blink .46s ease;
}

@keyframes g-veil-blink {
    45% { transform: scaleY(.08); }
}

.g-veil-track {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    border-radius: var(--g-radius-pill);
    background: rgba(88, 101, 114, .3);
    box-shadow: inset 0 1px 3px rgba(38, 49, 60, .22);
    transition: background var(--g-dur-state) ease, box-shadow var(--g-dur-state) ease;
}

/* 遮著的時候軌道慢慢呼吸，提示這裡可以撥 */
.g-veil.is-masked .g-veil-track {
    animation: g-veil-breathe 2.8s ease-in-out infinite;
}

@keyframes g-veil-breathe {
    50% { box-shadow: inset 0 1px 3px rgba(38, 49, 60, .22), 0 0 0 4px var(--g-accent-soft); }
}

.g-veil-switch[aria-checked="true"] .g-veil-track {
    background: linear-gradient(100deg, var(--g-accent), var(--g-accent-strong));
    box-shadow: inset 0 1px 3px rgba(120, 40, 0, .3), 0 5px 14px rgba(239, 77, 0, .3);
}

/* 鈕：按住時像液體一樣拉長（開著的時候往左長），放手 spring 到另一邊 */
.g-veil-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: var(--g-radius-pill);
    background: #fff;
    box-shadow: 0 2px 6px rgba(38, 49, 60, .3), inset 0 -1px 0 rgba(0, 0, 0, .06);
    transition: transform var(--g-dur-move) var(--g-ease-spring), width var(--g-dur-micro) var(--g-ease-out);
}

.g-veil-switch[aria-checked="true"] .g-veil-knob {
    transform: translateX(20px);
}

.g-veil-switch:active .g-veil-knob {
    width: 30px;
}

.g-veil-switch[aria-checked="true"]:active .g-veil-knob {
    transform: translateX(12px);
}

.g-veil-help {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--g-accent-soft);
    color: var(--g-accent-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: background var(--g-dur-state) ease, color var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-veil-help:hover,
.g-veil-help:focus-visible {
    background: var(--g-accent);
    color: #fff;
    outline: 0;
    transform: scale(1.12);
}

/* 六座展台 */
.g-veil-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.g-veil-shelf {
    --hue: 22;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 14px 8px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(45, 55, 64, .12), inset 0 0 0 1px rgba(0, 0, 0, .04);
    animation: g-rise var(--g-dur-enter) var(--g-ease-spring) both;
    animation-delay: calc(var(--i, 0) * 50ms + 60ms);
    transition: box-shadow var(--g-dur-state) ease;
}

/* 拉出來的封面會探出展台上緣與左右，那一座要浮在鄰居上面 */
.g-veil-shelf:hover,
.g-veil-shelf.has-focus,
.g-veil-shelf:focus-within {
    z-index: 2;
    box-shadow: 0 18px 40px hsla(var(--hue), 70%, 45%, .26), inset 0 0 0 1px rgba(0, 0, 0, .04);
}

/* 底色光暈自己裁圓角（展台本身不能 overflow:hidden，封面要能探出去），游標在哪就偏向哪 */
.g-veil-aura {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: radial-gradient(110% 95% at var(--gx, 78%) var(--gy, 8%),
                hsla(var(--hue), 88%, 72%, .5),
                hsla(calc(var(--hue) + 40), 85%, 82%, .22) 42%,
                transparent 72%);
    pointer-events: none;
}

.g-veil-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.g-veil-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--g-ink);
    text-decoration: none;
    transition: color var(--g-dur-state) ease;
}

.g-veil-title:hover {
    color: var(--g-accent-strong);
    text-decoration: none;
}

.g-veil-title b {
    overflow: hidden;
    font-size: 16px;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-veil-title small {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--g-radius-pill);
    background: hsla(var(--hue), 80%, 50%, .13);
    color: hsl(var(--hue), 70%, 32%);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

/* 前往鈕：平常是半透明小圓，滑過展台就填成主色往右推 */
.g-veil-go {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    transition: background var(--g-dur-state) ease, transform var(--g-dur-move) var(--g-ease-spring);
}

.g-veil-go::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -5px;
    border-top: 1.8px solid var(--g-muted);
    border-right: 1.8px solid var(--g-muted);
    transform: rotate(45deg);
    transition: border-color var(--g-dur-state) ease;
}

.g-veil-shelf:hover .g-veil-go,
.g-veil-go:focus-visible {
    background: var(--g-accent);
    outline: 0;
    transform: translateX(3px);
}

.g-veil-shelf:hover .g-veil-go::before,
.g-veil-go:focus-visible::before {
    border-color: #fff;
}

/* 書堆：封面絕對定位散落在裡面；拉出來的那本會探出展台上緣，所以展台不能 overflow:hidden */
.g-veil-pile {
    --w: 74px;
    position: relative;
    z-index: 1;
    height: 158px;
    margin-top: 2px;
}

/* 桌面上的一攤影子，書才不是浮在半空 */
.g-veil-pile::before {
    content: '';
    position: absolute;
    right: 4%;
    bottom: 0;
    left: 4%;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(closest-side, hsla(var(--hue), 45%, 25%, .22), transparent);
    pointer-events: none;
}

.g-veil-cov {
    position: absolute;
    bottom: var(--b, 8px);
    left: var(--x, 50%);
    z-index: var(--z, 1);
    display: block;
    width: var(--w);
    margin-left: calc(var(--w) / -2);
    aspect-ratio: 5 / 7;
    transform: translate3d(calc(var(--px, 0) * var(--par, 6) * 1px), calc(var(--py, 0) * var(--par, 6) * .5px), 0)
               rotate(var(--r, 0deg))
               scale(var(--sc, 1));
    transform-origin: 50% 100%;
    transition: transform .28s var(--g-ease-out);
}

.g-veil-cov:focus-visible {
    outline: 0;
}

.g-veil-cov.is-focus {
    z-index: 30;
}

.g-veil-pop {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(var(--dim, 1));
    transform-origin: 50% 100%;
    transition: transform var(--g-dur-move) var(--g-ease-spring), filter var(--g-dur-state) ease;
    pointer-events: none;
}

/* 同堆有一本被拉出來：其他的壓下去、變小、變暗 */
.g-veil-pile.has-focus .g-veil-cov:not(.is-focus) .g-veil-pop {
    filter: brightness(calc(var(--dim, 1) * .74)) saturate(.7);
    transform: translate3d(0, 9px, 0) scale(.86);
}

/* 被拉出來的那本：轉正、往前落到桌面前緣（把 --b 抵掉，遠的書才不會放大後蓋到標題）、拉到固定大小。
   順序有意義：先反轉回正，之後的位移才是螢幕方向；位移與倍率都除以 --sc 抵掉外層的深度縮放 */
.g-veil-cov.is-focus .g-veil-pop {
    filter: none;
    transform: rotate(calc(var(--r, 0deg) * -1))
               translate3d(0, calc((var(--b, 8px) - 6px) / var(--sc, 1)), 0)
               scale(calc(1.4 / var(--sc, 1)));
}

/* 呼吸光暈 */
.g-veil-glow {
    position: absolute;
    inset: -7px;
    border-radius: 14px;
    background: hsl(var(--hue), 92%, 60%);
    filter: blur(13px);
    opacity: 0;
    transition: opacity var(--g-dur-state) ease;
}

.g-veil-cov.is-focus .g-veil-glow {
    opacity: .55;
    animation: g-veil-glow 1.9s ease-in-out infinite;
}

@keyframes g-veil-glow {
    0%, 100% { opacity: .38; transform: scale(.97); }
    50%      { opacity: .9; transform: scale(1.09); }
}

.g-veil-cov-body {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #e6e9ed;
    box-shadow: 0 8px 16px rgba(38, 49, 60, .3);
    animation: g-veil-drop .7s var(--g-ease-spring) both;
    animation-delay: calc(var(--ci, 0) * 34ms + 120ms);
    transition: box-shadow var(--g-dur-state) ease;
}

@keyframes g-veil-drop {
    from { opacity: 0; transform: translate3d(0, -40px, 0) rotate(-8deg); }
}

.g-veil-cov.is-focus .g-veil-cov-body {
    box-shadow: 0 18px 30px rgba(38, 49, 60, .36), 0 0 0 1.5px hsla(var(--hue), 90%, 62%, .85);
}

.g-veil-cov-body img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .7s ease, transform .7s var(--g-ease-spring);
    transition-delay: calc(var(--ci, 0) * 30ms);
}

.g-veil.is-masked .g-veil-cov-body img {
    filter: blur(9px) saturate(1.2) brightness(1.04);
    transform: scale(1.24);
}

.g-veil-frost {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .34));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    transition: opacity .5s ease, clip-path .7s var(--g-ease-out);
    transition-delay: calc(var(--ci, 0) * 30ms);
    pointer-events: none;
}

.g-veil.is-masked .g-veil-frost {
    opacity: 1;
    clip-path: circle(75% at 50% 50%);
}

/* 光帶：閒置時每 7 秒依 --ci 掠過全部封面一輪；除霧／結霜那一下改成快掃 */
.g-veil-cov-body::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    z-index: 2;
    width: 60%;
    height: 140%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    opacity: 0;
    transform: translateX(-170%) skewX(-18deg);
    animation: g-veil-glint 7s ease-in-out infinite;
    animation-delay: calc(var(--ci, 0) * 110ms + 1.6s);
    pointer-events: none;
}

.g-veil:is(.is-defrosting, .is-frosting) .g-veil-cov-body::after {
    animation: g-veil-sweep .9s ease both;
    animation-delay: calc(var(--ci, 0) * 30ms);
}

@keyframes g-veil-glint {
    0%   { opacity: 0; transform: translateX(-170%) skewX(-18deg); }
    3%   { opacity: .9; }
    12%  { opacity: 0; transform: translateX(280%) skewX(-18deg); }
    100% { opacity: 0; transform: translateX(280%) skewX(-18deg); }
}

@keyframes g-veil-sweep {
    0%   { opacity: 0; transform: translateX(-170%) skewX(-18deg); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(280%) skewX(-18deg); }
}

/* 平板兩欄、手機一欄（書堆放大一號） */
@media (max-width: 991.98px) {
    .g-veil-bar {
        justify-content: space-between;
    }

    .g-veil-switch {
        flex: 1;
    }

    .g-veil-switch-label {
        flex: 1;
        white-space: normal;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .g-veil-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .g-show-skel--adult {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .g-veil-grid,
    .g-show-skel--adult {
        grid-template-columns: minmax(0, 1fr);
    }

    .g-veil-pile {
        --w: 86px;
        height: 182px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-veil-cov,
    .g-veil-pop,
    .g-veil-cov-body img,
    .g-veil-frost,
    .g-veil-knob {
        transition: none !important;
    }

    .g-veil-cov-body,
    .g-veil-cov-body::after,
    .g-veil-cov.is-focus .g-veil-glow,
    .g-veil.is-masked .g-veil-track {
        animation: none !important;
    }
}

.g-mega-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
}

.g-mega-close:hover {
    background: var(--g-control-hover);
    color: var(--g-accent-strong);
}

.g-mega-close:active {
    transform: scale(.9);
}

/* 遮罩 */
.g-scrim {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: var(--g-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--g-dur-state) ease;
}

.g-scrim.is-on {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
 * 語言下拉 .g-dd
 * glassChrome.initLangMenu 從 website_language.jsp 的 modal 選項建出來，
 * 取代 header 語言鈕原本開的 Bootstrap modal。面板等級 .84 玻璃，
 * 桌面右緣對齊觸發鈕（JS 算 right），手機鋪滿 dock 寬度（見手機區塊）。
 * z-index 1032 = 規範的「下拉」層，在 mega panel 1031 之上。
 * ============================================================ */
.g-dd {
    position: fixed;
    top: calc(var(--g-dock-inset) + var(--g-dock-height) + 8px);
    right: 14px;
    z-index: 1032;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--g-border);
    border-radius: 20px;
    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);
    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))) {
    .g-dd {
        background: var(--g-surface-fallback);
    }
}

.g-dd[hidden] {
    display: none;
}

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

@keyframes g-dd-out {
    to { opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); }
}

.g-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--g-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

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

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

.g-dd-item.is-current {
    background: var(--g-accent-soft);
    color: var(--g-accent-ink);
    box-shadow: inset 3px 0 0 var(--g-accent);
}

/* 目前語系打勾 */
.g-dd-item.is-current::after {
    content: '';
    width: 6px;
    height: 11px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

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

/* ============================================================
 * 一次性提示 .g-toast
 * pu.modules.glassChrome.toast(message, ms) 建立，底部置中的面板等級玻璃膠囊，
 * 約 5 秒後淡出移除。手機底部有 dock，往上避開 --g-mobile-bottom-clearance。
 * 首頁 AI 推薦「不再顯示」、會員中心「首頁顯示 AI 個人推薦」開關共用；
 * pubu.ui 的 .action-toast（全螢幕黑底 1.6 秒）留給「已加入收藏」這種短句。
 * z-index 1040 在下拉 1032 之上、不蓋 modal（1050）。
 * ============================================================ */
.g-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--g-mobile-bottom-clearance) + 12px);
    z-index: 1040;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 20px;
    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);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity var(--g-dur-state) ease, transform var(--g-dur-state) var(--g-ease-out);
}

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

.g-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (min-width: 768px) {
    .g-toast {
        bottom: 28px;
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-toast {
        transition: none;
        transform: translate(-50%, 0);
    }
}

/* ============================================================
 * 網頁推播小鈴鐺 #g-push-bell 與面板 .g-push（webPush.js，markup 在 webpush_bell.jspf）
 * 鈴鐺就是 header 的圓鈕（.btn--transparent），圖示用 mask 依狀態換：
 *   default 外框鈴＋橘色提醒點（呼吸光暈），on 橘色響鈴，off／blocked 斜線鈴，pending 輕搖。
 * 面板借 .g-dd 的玻璃底與進退場（桌面右緣對齊鈴鐺、手機鋪滿 dock 寬），這裡只補排版；
 * 面板裡的按鈕用半透明實色，不再疊玻璃。class 不可含 icon--／btn--（pubu.ui 萬用選取器）。
 * ============================================================ */
:root {
    --g-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z'/%3E%3C/svg%3E");
    --g-icon-bell-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.58 4.08 6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42zM18 11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2v-5zm-6 11c.14 0 .27-.01.4-.04.65-.14 1.18-.58 1.44-1.18.1-.24.15-.5.15-.78h-4c.01 1.1.9 2 2.01 2z'/%3E%3C/svg%3E");
    --g-icon-bell-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zM12 6.5c2.49 0 4 2.02 4 4.5v2.17l2 2V11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05zM5.41 3.35 4 4.76l2.81 2.81C6.29 8.57 6 9.73 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41L5.41 3.35zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76V17z'/%3E%3C/svg%3E");
}

#g-push-bell {
    position: relative;
}

.g-push-ico {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    background-color: #495057;
    -webkit-mask: var(--g-icon-bell) center / 24px 24px no-repeat;
    mask: var(--g-icon-bell) center / 24px 24px no-repeat;
    transform-origin: 50% 12%;
}

#g-push-bell[data-state="on"] .g-push-ico {
    background-color: var(--g-accent);
    -webkit-mask-image: var(--g-icon-bell-on);
    mask-image: var(--g-icon-bell-on);
}

#g-push-bell[data-state="off"] .g-push-ico,
#g-push-bell[data-state="blocked"] .g-push-ico {
    background-color: var(--g-muted);
    -webkit-mask-image: var(--g-icon-bell-off);
    mask-image: var(--g-icon-bell-off);
}

#g-push-bell[data-state="pending"] .g-push-ico {
    animation: g-push-ring 1s var(--g-ease-out) infinite;
}

/* 提醒點：還沒決定要不要收通知時一直亮著，這就是「提醒開啟小鈴鐺」 */
.g-push-dot {
    display: none;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--g-accent);
    box-shadow: 0 0 0 2px var(--g-ground);
    pointer-events: none;
}

#g-push-bell[data-state="default"] .g-push-dot {
    display: block;
    animation: g-push-pulse 2.4s var(--g-ease-out) infinite;
}

@keyframes g-push-pulse {
    0% { box-shadow: 0 0 0 2px var(--g-ground), 0 0 0 2px var(--g-accent-ring); }
    70% { box-shadow: 0 0 0 2px var(--g-ground), 0 0 0 10px rgba(255, 107, 26, 0); }
    100% { box-shadow: 0 0 0 2px var(--g-ground), 0 0 0 10px rgba(255, 107, 26, 0); }
}

@keyframes g-push-ring {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(14deg); }
    75% { transform: rotate(-14deg); }
}

.g-dd.g-push {
    gap: 0;
    width: 330px;
    max-width: calc(100vw - 28px);
    padding: 18px 18px 16px;
}

.g-push-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--g-muted);
    cursor: pointer;
    transition: background var(--g-dur-state) ease, color var(--g-dur-state) ease;
}

.g-push-x::before,
.g-push-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.6px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

.g-push-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.g-push-x:hover {
    background: var(--g-control-hover);
    color: var(--g-ink);
}

.g-push-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 26px;
}

.g-push-badge {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--g-accent-soft);
}

.g-push-badge::after {
    content: '';
    position: absolute;
    inset: 8px;
    background: var(--g-accent);
    -webkit-mask: var(--g-icon-bell-on) center / 24px 24px no-repeat;
    mask: var(--g-icon-bell-on) center / 24px 24px no-repeat;
}

.g-push:is([data-state="off"], [data-state="blocked"]) .g-push-badge {
    background: rgba(95, 107, 120, .12);
}

.g-push:is([data-state="off"], [data-state="blocked"]) .g-push-badge::after {
    background: var(--g-muted);
    -webkit-mask-image: var(--g-icon-bell-off);
    mask-image: var(--g-icon-bell-off);
}

.g-push-title {
    color: var(--g-ink);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
}

.g-push-body {
    margin: 12px 0 16px;
    color: var(--g-muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.g-push-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.g-push-btn {
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--g-divider);
    border-radius: var(--g-radius-pill);
    background: rgba(255, 255, 255, .62);
    color: var(--g-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

.g-push-btn:hover {
    background: var(--g-control-active);
}

.g-push-btn.is-primary {
    border-color: transparent;
    background: var(--g-accent);
    box-shadow: 0 6px 16px rgba(255, 107, 26, .28);
    color: #fff;
}

.g-push-btn.is-primary:hover {
    background: var(--g-accent-strong);
}

.g-push-btn:active {
    transform: scale(.96);
    transition-duration: .08s;
}

.g-push-btn:disabled {
    opacity: .6;
    cursor: progress;
}

@media (max-width: 991.98px) {
    .g-dd.g-push {
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #g-push-bell .g-push-dot,
    #g-push-bell .g-push-ico {
        animation: none !important;
    }
}

/* ============================================================
 * 回到頂端 #gotop
 * 短版 layout 的 <div id="gotop">Top</div> 原本沒有任何樣式（舊 CSS 在
 * css/retail/common/style.css，新版頁面沒載），文字直接裸在左上角。
 * 只在 glassChrome 啟動過的頁面（html.g-glass）套用，舊版頁面維持原樣。
 * 顯示與否由 glassChrome.initGoTop 切 is-on。
 * ============================================================ */
html.g-glass #gotop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1020;
    width: 44px;
    height: 44px;
    border: 1px solid var(--g-border);
    border-radius: 50%;
    /* 暖紙底色很淺，dock 等級的 .62 透明會整顆消失，用控制項等級的 .74 加一圈分隔線 */
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-control-active);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(170%);
    backdrop-filter: blur(var(--g-blur)) saturate(170%);
    box-shadow: inset 0 0 0 1px var(--g-divider), inset 0 1px 0 var(--g-inset-line), var(--g-shadow-soft);
    color: var(--g-ink);
    /* 原本的「Top」文字收掉，改畫箭頭 */
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.9);
    pointer-events: none;
    transition: opacity var(--g-dur-state) ease,
                transform var(--g-dur-move) var(--g-ease-spring),
                background var(--g-dur-state) ease,
                color var(--g-dur-state) ease,
                box-shadow var(--g-dur-state) ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass #gotop {
        background: var(--g-surface-fallback);
    }
}

html.g-glass #gotop::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -6px;
    border-top: 2.2px solid currentColor;
    border-left: 2.2px solid currentColor;
    transform: rotate(45deg);
}

html.g-glass #gotop.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

html.g-glass #gotop:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), #fff;
    color: var(--g-accent-strong);
    transform: translate3d(0, -2px, 0);
    box-shadow: inset 0 0 0 1px var(--g-accent-ring), inset 0 1px 0 var(--g-inset-line), 0 10px 26px rgba(78, 87, 94, .18);
}

html.g-glass #gotop:active {
    transform: scale(.92);
    transition-duration: .08s;
}

html.g-glass #gotop:focus-visible {
    outline: 3px solid var(--g-accent-ring);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    html.g-glass #gotop {
        right: 14px;
    }
}

/* 焦點環：鍵盤操作才顯示（規範 9.2） */
header.nav-desktop :focus-visible,
.g-mega :focus-visible {
    outline: 3px solid var(--g-accent-ring);
    outline-offset: 2px;
}

/* ============================================================
 * 手機：dock 貼齊上緣，mega panel 改為底部 sheet
 * ============================================================ */
@media (max-width: 991.98px) {
    :root {
        --g-dock-inset: 8px;
        --g-dock-height: 56px;
    }

    /* ---- 頂部 dock：貼齊上緣，分類、logo、搜尋、購物車 ----
       沿用桌面同一組 token，只是 inset 8 / 高 56，控制項縮成 40px 圓鈕 */
    header.nav-desktop {
        top: var(--g-dock-inset) !important;
        right: var(--g-dock-inset);
        left: var(--g-dock-inset);
        width: auto;
        height: var(--g-dock-height);
        border: 1px solid var(--g-border) !important;
        border-radius: var(--g-radius-dock);
        background:
            linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
            var(--g-dock-surface) !important;
        -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-soft) !important;
        color: var(--g-ink);
        transition: transform .5s,
                    height var(--g-dur-move) var(--g-ease-spring),
                    box-shadow var(--g-dur-state) ease;
    }

    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        header.nav-desktop {
            background: var(--g-surface-fallback) !important;
        }
    }

    /* 往下捲收起：原本 translateY(-100%) 只移自己的高度，會留 inset 那 8px 露在上面 */
    header.nav-desktop.is-hidden {
        transform: translateY(calc(-100% - var(--g-dock-inset) - 6px));
    }

    header.nav-desktop.is-compact {
        height: 48px;
    }

    header.nav-desktop .navbar {
        height: 100%;
        padding: 0 4px !important;
    }

    header.nav-desktop .container-fluid {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        height: 100%;
    }

    header.nav-desktop .left,
    header.nav-desktop .right {
        height: auto;
        gap: 4px;
    }

    header.nav-desktop .logo {
        margin-right: 8px;
    }

    header.nav-desktop .logo img {
        height: 26px;
        transition: height var(--g-dur-move) var(--g-ease-spring);
    }

    header.nav-desktop.is-compact .logo img {
        height: 23px;
    }

    header.nav-desktop .btn--transparent,
    header.nav-desktop #top_cart {
        width: 40px;
        height: 40px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-color: transparent !important;
        border-radius: var(--g-radius-pill) !important;
        background: var(--g-control) !important;
        color: var(--g-ink) !important;
        transition: background var(--g-dur-state) ease,
                    transform var(--g-dur-micro) var(--g-ease-out);
    }

    header.nav-desktop .btn--transparent:active,
    header.nav-desktop #top_cart:active {
        transform: scale(.9);
        transition-duration: .08s;
    }

    /* 購物車數字貼在圓鈕右上角。
       pubu.ui 把 .cart-cnt 設成 position:relative 排在圖示後面，圓鈕只有 40px、
       padding 0，數字就整顆掉到圓外面（實機截圖的跑版）；改成 absolute 定位在角上。 */
    header.nav-desktop #top_cart {
        position: relative;
    }

    header.nav-desktop #top_cart .badge-pill {
        position: absolute;
        top: -2px !important;
        right: -4px !important;
        bottom: auto;
        left: auto !important;
        margin: 0;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid var(--g-ground);
        border-radius: 9px;
        font-size: 10.5px;
        line-height: 14px;
        transform: none;
    }

    /* 語言鈕：pubu.ui 在 1200 以下整顆藏掉（header .language{display:none}），
       手機原本只能從舊的分類滑出選單換語言；琉光 dock 把它拿回來當圓鈕，
       只留地球圖示，文字與箭頭收掉，點開的是 .g-dd 下拉 */
    html.g-glass header.nav-desktop .language {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    html.g-glass header.nav-desktop .language .txt,
    html.g-glass header.nav-desktop .language .icon--arrow_down {
        display: none !important;
    }

    /* 語言下拉在手機鋪滿 dock 寬度 */
    .g-dd {
        top: calc(var(--g-dock-inset) + var(--g-dock-height) + 6px);
        right: var(--g-dock-inset);
        left: var(--g-dock-inset);
        transform-origin: top center;
    }

    /* 儲值金：上面那條把 .btn--transparent 一律鎖成 40px 的圓鈕，但這顆裡面還有
       「儲值金」與金額兩段文字，40px 塞不下就被擠成直排、撐破 56px 的 dock
       （實機 991px 看到的摺疊）。這裡讓它恢復成自適應寬度的膠囊，
       「儲值金」三個字收掉只留硬幣圖示與金額，這個寬度區間放得下。 */
    header.nav-desktop .iGold {
        width: auto !important;
        padding: 0 10px !important;
        gap: 4px;
        white-space: nowrap;
    }

    header.nav-desktop .iGold .g-label,
    header.nav-desktop .iGold > .txt {
        display: none;
    }

    header.nav-desktop .iGold .g-wallet-amount {
        margin-left: 0;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--g-accent-ink);
    }

    /* 搜尋展開態（pubu.ui 用 d-flex 打開 form）：一樣是膠囊 */
    header.nav-desktop #search-bar {
        height: 40px;
        margin: 0 4px;
        border: 0 !important;
        border-radius: var(--g-radius-pill) !important;
        background: var(--g-control-active);
        box-shadow: inset 0 0 0 1px var(--g-divider);
        overflow: hidden;
    }

    header.nav-desktop #search-bar .search-inline,
    header.nav-desktop #search-bar .form-control {
        height: 100%;
        border: 0 !important;
        background: transparent !important;
    }

    header.nav-desktop #global-search-btn {
        background: transparent !important;
        color: var(--g-muted) !important;
    }

    /* 內容避開 dock：#wrap-content 原本 top:60px，dock 底緣在 8 + 56 = 64 */
    body .sidebar-content {
        padding-top: calc(var(--g-dock-inset) + var(--g-dock-height) - 60px);
    }

    /* ---- mega panel 改為底部 sheet ---- */
    .g-mega {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 82vh;
        border-radius: var(--g-radius-panel) var(--g-radius-panel) 0 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        transform-origin: bottom center;
        animation: g-sheet-in var(--g-dur-enter) var(--g-ease-spring);
    }

    /* 拖曳把手 */
    .g-mega::before {
        content: '';
        display: block;
        width: 44px;
        height: 5px;
        margin: 8px auto 2px;
        border-radius: 3px;
        background: var(--g-divider);
    }

    .g-mega-close {
        top: 6px;
        right: 10px;
        width: 32px;
        height: 32px;
    }

    .g-mega.is-leaving {
        animation: g-sheet-out .26s var(--g-ease-in) forwards;
    }

    @keyframes g-sheet-in {
        from { opacity: 0; transform: translate3d(0, 40px, 0); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes g-sheet-out {
        to { opacity: 0; transform: translate3d(0, 40px, 0); }
    }

    .g-rail {
        flex-direction: row;
        gap: 6px;
        padding: 6px 56px 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--g-divider);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .g-rail::-webkit-scrollbar {
        display: none;
    }

    .g-rail-ind {
        display: none;
    }

    .g-rail-item {
        flex: none;
        height: 34px;
        padding: 0 12px;
        border-radius: var(--g-radius-pill);
        background: var(--g-control);
        box-shadow: inset 0 0 0 1px var(--g-divider);
        font-size: 13px;
    }

    .g-rail-item.is-selected {
        background: var(--g-accent);
        color: #fff;
        box-shadow: 0 6px 16px rgba(239, 77, 0, .28);
    }

    .g-rail-item .g-caret {
        display: none;
    }

    .g-mega-body {
        padding: 12px 14px 20px;
    }

    .g-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .g-kids {
        grid-template-columns: 1fr;
    }

    .g-pubook {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 190px;
        gap: 10px;
    }

    /* 主打卡在 sheet 裡改成一整列的橫式卡，不再吃兩個 row */
    .g-pubook-card--hero {
        grid-row: span 1;
    }

    .g-pubook-card--hero .g-pubook-copy {
        justify-content: flex-start;
        height: auto;
        max-width: 58%;
        padding: 20px 0 0 18px;
    }

    .g-pubook-card--hero .g-pubook-name {
        font-size: 21px;
    }

    .g-pubook-card--hero .g-pubook-slogan {
        margin-top: 12px;
        font-size: 13px;
    }

    .g-pubook-card--hero .g-pubook-shot {
        width: 40%;
    }

    /* ---- 展示版位在 sheet 裡 ---- */
    .g-show-skel {
        grid-template-columns: 1fr 1fr;
    }

    /* 舞台 400：後排抬高要 56px 的頭部空間，正面封面（56+160×1.12）與文案（bottom 34 起約 120 高）才不會疊到 */
    .g-hot-stage {
        --fan-top: 56px;
        --fan-h: 170px;
        height: 400px;
    }

    .g-hot-cov {
        width: 112px;
        height: 160px;
        margin-left: -56px;
    }

    .g-hot-caption {
        right: 16px;
        bottom: 34px;
        left: 16px;
    }

    .g-hot-title {
        font-size: 17px;
    }

    .g-hot-board {
        width: 190px;
    }

    .g-ch {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .g-ch-card {
        height: 192px;
    }

    .g-ch-fan img {
        width: 74px;
        height: 104px;
    }

    .g-np {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px 12px;
        padding: 10px 2px 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .g-np::-webkit-scrollbar {
        display: none;
    }

    .g-np-card {
        flex: none;
        width: 128px;
    }

    .g-md-shelf {
        --n: 4.5;
        --gap: 12px;
    }
}

@media (max-width: 767.98px) {
    .g-md-shelf {
        --n: 3.5;
        --gap: 10px;
    }
}

/* ============================================================
 * 手機底部玻璃 dock：沿用 nav_mobile_bottom.jsp 的五個項目，
 * 指示器 .g-bd-ind 由 glassChrome.initBottomDock 塞進去、spring 滑到目前頁
 * ============================================================ */
@media (max-width: 767.98px) {
    .nav-bottom-mobile {
        right: var(--g-dock-inset);
        bottom: calc(var(--g-dock-inset) + env(safe-area-inset-bottom));
        left: var(--g-dock-inset);
        z-index: 1030;
        width: auto;
        height: var(--g-dock-height);
        min-height: 0;
        padding: 4px;
        border: 1px solid var(--g-border) !important;
        border-radius: var(--g-radius-dock);
        background:
            linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
            var(--g-dock-surface) !important;
        -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-soft);
        transition: transform .5s;
    }

    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .nav-bottom-mobile {
            background: var(--g-surface-fallback) !important;
        }
    }

    .nav-bottom-mobile.is-hidden {
        transform: translateY(calc(100% + var(--g-dock-inset) + 6px));
    }

    .nav-bottom-mobile .container {
        height: 100%;
        max-width: none;
        padding: 0;
    }

    .nav-bottom-mobile .nav {
        position: relative;
        flex-wrap: nowrap;
        height: 100%;
        margin: 0;
    }

    .nav-bottom-mobile .nav-item {
        position: relative;
        z-index: 1;
    }

    .nav-bottom-mobile .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 100%;
        padding: 0;
        border-radius: 18px;
        background: transparent !important;
        color: var(--g-muted);
        font-size: 10.5px;
        font-weight: 600;
        transition: color var(--g-dur-state) ease, transform var(--g-dur-micro) var(--g-ease-out);
    }

    .nav-bottom-mobile .nav-link h2 {
        margin: 0;
    }

    .nav-bottom-mobile .nav-link [class*="icon--"] {
        background-color: var(--g-muted);
        transition: background-color var(--g-dur-state) ease;
    }

    .nav-bottom-mobile .nav-link.active {
        color: var(--g-accent-strong);
    }

    .nav-bottom-mobile .nav-link.active [class*="icon--"] {
        background-color: var(--g-accent-strong);
    }

    .nav-bottom-mobile .nav-link:active {
        transform: scale(.9);
    }

    .nav-bottom-mobile .g-bd-ind {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        width: 20%;
        list-style: none;
        border-radius: 18px;
        background: var(--g-control-active);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 6px 16px rgba(78, 87, 94, .12);
        transition: transform var(--g-dur-move) var(--g-ease-spring);
    }

    /* 內容底部留出 dock 的高度 */
    #content.sidebar-content {
        margin-bottom: calc(var(--g-dock-height) + var(--g-dock-inset) * 2 + env(safe-area-inset-bottom)) !important;
    }

    /* 回到頂端鈕疊在 dock 上方 */
    html.g-glass #gotop {
        bottom: calc(var(--g-dock-height) + var(--g-dock-inset) * 2 + 8px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
 * 橫向商品列在手機可以左右滑
 *
 * 這些列是 Swiper（.swiper-list），但容器沒有設 touch-action，計算值是 auto，
 * 於是手指一動瀏覽器就先把手勢當成頁面捲動接走，Swiper 的 touchmove
 * preventDefault 已經來不及 —— 桌機用滑鼠（simulateTouch）不受影響，
 * 所以只有手機滑不動。同一頁的 banner 是 Owl carousel，vendor.min.css 有給它
 * touch-action:pan-y，那個就滑得動，兩者的差別就在這裡。
 * pan-y ＝ 直向捲動交給瀏覽器、橫向手勢留給 Swiper。
 * 只挑 .swiper-container-horizontal，直向的 Swiper 不能套。
 * ============================================================ */
html.g-glass .swiper-list.swiper-container-horizontal {
    touch-action: pan-y;
}

/* ============================================================
 * 列表頁琉光（搜尋 /search、分類 /ebook-category、/magazine-category、
 * 成人 /adult-category、商店 /store、系列 /store/../series）
 *
 * 商品卡本身是同一個 tag，卡片樣式在 home-v2.css 用 :is(.home-v2, .list-v2)
 * 與首頁共用；這一段只處理列表頁的框架：麵包屑、標題、類型 tab、標籤列、
 * 排序器、篩選器與其面板、分頁、商店搜尋框、空狀態。
 * 各頁的 <main> 掛 .list-v2；分頁與麵包屑這種全站共用元件直接綁 html.g-glass，
 * 才不會有的頁面玻璃、有的頁面沒有。
 * 排序器／篩選器／分頁／空狀態這幾條的選擇器同時帶著 .shelf-v2 —— 內容庫
 * 用的是同一組 widget，細節見下面「內容庫琉光」那一段。
 * ============================================================ */

/* ---- 麵包屑 ----
   整條做成「一顆」貼合內容的玻璃膠囊，裡面是純文字與輕量的 › 分隔符。
   之前是每一層各自一顆膠囊，但 Bootstrap 的分隔符是 li 的 ::before，
   li 一旦變成膠囊，分隔符就被關進膠囊裡跟文字疊在一起。
   目前所在層級用 :last-child 判斷，不用「有沒有 <a>」—— 成人分類頁三層
   都掛著 .active，有連結的那層也是，靠 class 判斷會認錯。
   外框 .breadcrumb-bar 由 breadcrumbsNew.jsp 等三個 include 輸出，
   沿用原本 container 的寬度與對齊，膠囊才會跟下面的商品格線切齊。 ---- */
html.g-glass .breadcrumb-bar > ol.breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    margin-bottom: 0;
    padding: 5px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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, .07);
    color: var(--g-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .breadcrumb-bar > ol.breadcrumb {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .breadcrumb-bar .breadcrumb-item {
    display: inline;
    padding-left: 0;
    color: var(--g-muted);
}

html.g-glass .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 7px;
    color: var(--g-muted);
    opacity: .45;
    content: '\203A';
}

html.g-glass .breadcrumb-bar .breadcrumb-item > a {
    color: var(--g-muted);
    text-decoration: none;
    transition: color var(--g-dur-state) ease;
}

html.g-glass .breadcrumb-bar .breadcrumb-item > a:hover,
html.g-glass .breadcrumb-bar .breadcrumb-item > a:focus-visible {
    color: var(--g-accent-strong);
    text-decoration: none;
}

/* 目前所在的那一層 */
html.g-glass .breadcrumb-bar .breadcrumb-item:last-child {
    color: var(--g-accent-ink);
    font-weight: 600;
}

/* ---- 頁面標題與筆數 ---- */
html.g-glass .list-v2 .class-title-title {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
    color: var(--g-ink);
}

html.g-glass .list-v2 .class-title-txt {
    color: var(--g-muted);
}

/* ---- 商品類型 tab（全部／書籍／雜誌／影音／成人）----
   原本是整條白底 + 底線 active，改成一排玻璃膠囊 */
html.g-glass .class-tab.nav-class {
    background-color: transparent;
    border-bottom: 0;
}

html.g-glass .class-tab .nav {
    gap: 8px;
    padding: 4px 0;
}

html.g-glass .class-tab .nav-link {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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);
    font-size: 14px;
    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;
}

html.g-glass .class-tab .nav-link > .txt,
html.g-glass .class-tab .nav-link > span {
    font-size: inherit;
}

html.g-glass .class-tab .nav-link:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

html.g-glass .class-tab .nav-link:active {
    transform: scale(.95);
    transition-duration: .08s;
}

html.g-glass .class-tab .nav-link.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);
}

/* 膠囊化之後不需要 active 的橘色底線 */
html.g-glass .class-tab .nav-link.active > .txt::after,
html.g-glass .class-tab .nav-link.active > span::after {
    display: none;
}

/* ---- 排序器與篩選鈕：同一組玻璃控制項 ----
   兩顆都做成 40px 高的膠囊、文字置中、箭頭絕對定位在右側內距上。
   篩選鈕原本的箭頭是背景圖，玻璃底一蓋就沒了（「篩選」偏左、右邊空一塊）。
   箭頭「不能」補回 background 這個 shorthand：hover 換底色時整個 shorthand
   會被換成層數不同的另一組，箭頭那一層先消失、滑開時又從左上角補間飄回來。
   改成獨立的 ::after，底色怎麼換都不影響它。 */
html.g-glass .list-v2 .class-filter .styledSelect,
html.g-glass .shelf-v2 .form-select .styledSelect,
html.g-glass :is(.list-v2, .shelf-v2) .dropdown-filter > .dropdown-toggle,
html.g-glass .shelf-v2 .dropdown-editMenu > .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 30px !important;
    border: 1px solid var(--g-border) !important;
    border-radius: var(--g-radius-pill) !important;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface) !important;
    text-align: center;
    -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) !important;
    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;
}

/* 篩選鈕的箭頭。排序器自己已經有一顆 ::after（pubu.ui 畫的），這裡只補篩選鈕；
   Bootstrap 的 .dropdown-toggle::after 是用 border 畫的三角形，先歸零再換圖示。 */
html.g-glass :is(.list-v2, .shelf-v2) .dropdown-filter > .dropdown-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--g-icon-caret) center / contain no-repeat;
    mask: var(--g-icon-caret) center / contain no-repeat;
}

html.g-glass .list-v2 .class-filter .styledSelect:hover,
html.g-glass .shelf-v2 .form-select .styledSelect:hover,
html.g-glass :is(.list-v2, .shelf-v2) .dropdown-filter > .dropdown-toggle:hover,
html.g-glass .shelf-v2 .dropdown-editMenu > .btn:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86) !important;
    color: var(--g-accent-strong) !important;
    transform: translateY(-1px);
}

html.g-glass .list-v2 .class-filter .styledSelect.active,
html.g-glass .shelf-v2 .form-select .styledSelect.active,
html.g-glass :is(.list-v2, .shelf-v2) .dropdown-filter > .dropdown-toggle[aria-expanded="true"],
html.g-glass .shelf-v2 .dropdown-editMenu > .btn[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-control-active) !important;
    color: var(--g-accent-strong) !important;
    box-shadow: inset 0 0 0 1px var(--g-accent-ring);
}

/* ---- 兩顆鈕各自的下拉面板 ---- */
html.g-glass :is(.list-v2, .shelf-v2) .select .options.dropdown-menu,
html.g-glass :is(.list-v2, .shelf-v2) .dropdownMenu-moreinfo {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass :is(.list-v2, .shelf-v2) .select .options.dropdown-menu,
    html.g-glass :is(.list-v2, .shelf-v2) .dropdownMenu-moreinfo,
    html.g-glass .class-tab .nav-link {
        background: var(--g-surface-fallback) !important;
    }
}

/* 手機篩選保留 bottom navi 安全區；只有選項捲動，操作列留在面板內。 */
@media (max-width: 767.98px) {
    html.g-glass .dropdown-filter > .dropdownMenu-moreinfo {
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        bottom: var(--g-mobile-bottom-clearance) !important;
        left: 0 !important;
        height: calc(100vh - var(--g-mobile-bottom-clearance) - env(safe-area-inset-top, 0px));
        height: calc(100dvh - var(--g-mobile-bottom-clearance) - env(safe-area-inset-top, 0px));
        padding: 0;
        overflow: hidden;
        transform: none !important;
        z-index: 1032;
    }

    html.g-glass .dropdown-filter > .dropdownMenu-moreinfo.show {
        display: flex;
        flex-direction: column;
    }

    html.g-glass .dropdown-filter > .dropdownMenu-moreinfo > .header {
        flex: 0 0 56px;
        width: 100%;
        margin: 0;
    }

    html.g-glass .dropdown-filter .dropdownMenu-moreinfo > .form-filter {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    html.g-glass .dropdown-filter .form-filter > .list-group {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        margin: 0 !important;
        padding: 0 16px 16px;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    html.g-glass .dropdown-filter .form-filter > .footer {
        position: relative;
        bottom: auto;
        flex: 0 0 56px;
        width: 100%;
        margin: 0;
        z-index: 1;
        background: var(--g-surface-fallback);
    }

    html.g-glass .dropdown-filter > .dropdownMenu-moreinfo + .dropdownMenu-bk.show {
        z-index: 1031;
    }
}

/* 內距移到 ul 上：原本用 li 的左右 margin，內容會比容器寬，多出一條橫向捲軸 */
html.g-glass :is(.list-v2, .shelf-v2) .select .options.dropdown-menu {
    overflow-x: hidden;
    padding: 8px 6px;
}

html.g-glass :is(.list-v2, .shelf-v2) .select .options.dropdown-menu li {
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background var(--g-dur-state) ease, color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

html.g-glass :is(.list-v2, .shelf-v2) .select .options.dropdown-menu li:hover {
    background-color: var(--g-control-hover);
    color: var(--g-accent-strong);
    transform: translateX(3px);
}

/* 篩選面板：分組標題與內部的核取膠囊 */
html.g-glass :is(.list-v2, .shelf-v2) .dropdownMenu-moreinfo .list-group-item {
    background: transparent;
    border-color: var(--g-divider);
    color: var(--g-ink);
    font-weight: 600;
}

html.g-glass :is(.list-v2, .shelf-v2) .btn-group-filter .btn {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 0 0 1px rgba(88, 101, 114, .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);
}

html.g-glass :is(.list-v2, .shelf-v2) .btn-group-filter .btn:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

/* .active 由 pubu.ui 用 !important 上橘色實色，這裡只補高光與陰影 */
html.g-glass :is(.list-v2, .shelf-v2) .btn-group-filter .btn.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(239, 77, 0, .28);
}

/* ---- Bootstrap 彈窗（全站共用）----
   .modal.fade 的疊層彈窗：實白的 .modal-content 換成 panel 等級玻璃，
   黑底遮罩換成帶一點模糊的深色薄紗。玻璃畫在 .modal-content 本身沒問題 ——
   它自己就在 fixed 的 .modal 裡，底下沒有 fixed 子孫。
   排除套書「組合商品包含」那顆貼在頁面上的 .listModal-fixed（商品頁那段
   把它改成紙卡，裡面有 fixed 子孫，不能帶 backdrop-filter）。 ---- */
html.g-glass .modal.fade:not(.listModal-fixed) .modal-content {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    background: linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .05) 42%, transparent 68%), 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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .modal.fade:not(.listModal-fixed) .modal-content {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .modal-backdrop.show {
    background-color: rgba(38, 49, 60, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
}

html.g-glass .modal.fade:not(.listModal-fixed) .modal-header,
html.g-glass .modal.fade:not(.listModal-fixed) .modal-footer {
    border-color: var(--g-divider);
}

html.g-glass .modal.fade:not(.listModal-fixed) .modal-title {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
    color: var(--g-ink);
}

/* 「選擇閱讀格式」這類清單式彈窗：一列一顆整寬的連結鈕，分隔線與 hover 跟著玻璃 */
html.g-glass .modal.fade .modal-body .list-border {
    border-top-color: var(--g-divider);
}

html.g-glass .modal.fade .modal-body .list-border > .btn.btn--link {
    border-radius: 0;
    color: var(--g-ink);
    font-weight: 600;
    transition: background var(--g-dur-state) ease, color var(--g-dur-state) ease;
}

html.g-glass .modal.fade .modal-body .list-border > .btn.btn--link:hover,
html.g-glass .modal.fade .modal-body .list-border > .btn.btn--link:focus-visible {
    background: var(--g-control-hover);
    color: var(--g-accent-strong);
    text-decoration: none;
}

html.g-glass .modal.fade .modal-body .list-border > .btn.btn--link[data-dismiss="modal"] {
    color: var(--g-muted);
    font-weight: 500;
}

/* ---- 列表彈窗（系列叢書、分類全部展開…）----
   彈窗裡的 .class-tag 沿用列表頁那條 white-space:nowrap + overflow-x:auto，
   會把整排標籤壓成一行切掉（彈窗的用途正好相反：要一次看完），
   而且 Bootstrap 的 .modal-content 是一塊實白。這裡兩件事一起改：
   面板換成玻璃，標籤改成會換行的膠囊格。 ---- */
html.g-glass .listModal-modal .modal-content,
html.g-glass .modal:has(.class-tag) .modal-content {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .listModal-modal .modal-content,
    html.g-glass .modal:has(.class-tag) .modal-content {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .listModal-modal .modal-header,
html.g-glass .modal:has(.class-tag) .modal-header {
    border-bottom-color: var(--g-divider);
}

html.g-glass .listModal-modal .modal-title,
html.g-glass .modal:has(.class-tag) .modal-title {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
}

/* 標籤改成換行的膠囊格 */
html.g-glass .modal .class-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* 左右要留 12px：列表頁那條是 padding:4px 0，膠囊會直接貼在彈窗邊框上 */
    padding: 4px 12px !important;
    white-space: normal;
    overflow: visible;
}

html.g-glass .modal .class-tag h3 {
    margin: 0 !important;
}

html.g-glass .modal .class-tag .btn {
    margin: 0 !important;
}

/* 彈窗就是「全部展開」的結果，不要再被收合高度截斷 */
html.g-glass .modal:not(.listModal-fixed) .list-group-collapse .class-more {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 商店系列預覽：三行 30px 標籤 + 兩個 8px 間距 + 上下各 4px。
   與 store/page.jsp 的收合高度 114 同步；展開彈窗仍保留完整名稱。 */
html.g-glass .store-contentList-series .listModal-fixed .class-tag h3 {
    display: flex;
    max-width: 100%;
    min-width: 0;
    height: 30px;
}

html.g-glass .store-contentList-series .listModal-fixed .class-tag .btn {
    display: block;
    max-width: 100%;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.g-glass .store-contentList-series .listModal-fixed .class-more::before {
    display: none;
}

/* ---- 商店頁的站內搜尋框 ---- */
html.g-glass .list-v2 .class-search .form-control {
    border: 0 !important;
    border-radius: var(--g-radius-pill) 0 0 var(--g-radius-pill) !important;
    background: var(--g-control-active) !important;
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
}

html.g-glass .list-v2 .class-search .btn {
    border-radius: 0 var(--g-radius-pill) var(--g-radius-pill) 0 !important;
    background: var(--g-control-active) !important;
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-muted) !important;
}

html.g-glass .list-v2 .class-search .btn:hover {
    color: var(--g-accent-strong) !important;
}

/* ---- 分頁：上一頁／頁碼下拉／下一頁都做成玻璃控制項 ---- */
html.g-glass :is(nav.pages, .shelf-v2) .pagination {
    align-items: center;
    gap: 8px;
}

html.g-glass :is(nav.pages, .shelf-v2) .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin-left: 0;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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);
    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;
}

html.g-glass :is(nav.pages, .shelf-v2) a.page-link:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    border-color: var(--g-border);
    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);
}

html.g-glass :is(nav.pages, .shelf-v2) a.page-link:active {
    transform: scale(.94);
    transition-duration: .08s;
}

/* 頁碼下拉：原生 select，箭頭是 Bootstrap 畫的背景圖，留住右側內距 */
html.g-glass :is(nav.pages, .shelf-v2) select.page-link {
    padding-right: 28px;
    background-color: transparent;
}

/* 「/ 共幾頁」是純文字，不要做成鈕 */
html.g-glass :is(nav.pages, .shelf-v2) .page-all .page-link {
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--g-muted);
    font-weight: 500;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---- 查無結果的空狀態 ---- */
html.g-glass :is(.list-v2, .shelf-v2) .empty-info {
    max-width: 560px;
    margin-inline: auto;
    padding: 8px 24px 28px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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-soft);
    text-align: center;
}

html.g-glass :is(.list-v2, .shelf-v2) .empty-info-txtInfo {
    color: var(--g-muted);
}

@media (max-width: 991.98px) {
    html.g-glass .class-tab .nav-link {
        height: 34px;
        padding: 0 13px;
        font-size: 13px;
    }

    html.g-glass .breadcrumb-bar > ol.breadcrumb {
        padding: 4px 11px;
        font-size: 11.5px;
    }
}

/* ============================================================
 * 內容庫琉光（/bookshelf 書櫃與影音櫃、/bookshelf/download、
 * /bookshelf/showDeleted 已刪除還原）
 *
 * 掛載點：page.jsp／download.jsp／showDeleted.jsp 的 .bookshelf-header
 * 與 <main class="bookshelf-content"> 各掛一個 .shelf-v2 —— 這兩塊是兄弟
 * 節點，沒有「只包住內容庫」的共同祖先可以掛。
 *
 * 分類／排序／篩選跟列表頁是同一組 widget（.dropdown-filter、.styledSelect、
 * .dropdownMenu-moreinfo、.btn-group-filter），樣式沿用上一段「列表頁琉光」，
 * 只把 .shelf-v2 的選擇器加進那幾條；書封的玻璃相框在 home-v2.css，同樣用
 * :is(.home-v2, .list-v2, .shelf-v2) 共用。分頁與空狀態也是共用的。
 * 這一段只寫內容庫自己才有的東西。
 * ============================================================ */

/* ---- 標題與筆數 ---- */
html.g-glass .shelf-v2 .bookshelf-title h1 {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
    color: var(--g-ink);
}

html.g-glass .shelf-v2 .bookshelf-title .class-title-txt {
    color: var(--g-muted);
}

/* ---- 書櫃搜尋 ----
   原本是「白底橘框輸入框 ＋ 橘色方鈕」拼起來的直角矩形。改成整組一顆玻璃
   膠囊：輸入框透明貼在玻璃上，送出鈕縮成膠囊裡的一顆橘色圓鈕。 ---- */
html.g-glass .shelf-v2 .bookshelf-search .search-group {
    height: 40px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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);
    transition: box-shadow var(--g-dur-state) ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .bookshelf-search .search-group {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .bookshelf-search .search-group:focus-within {
    box-shadow: inset 0 0 0 1px var(--g-accent-ring), 0 6px 18px rgba(45, 55, 64, .12);
}

html.g-glass .shelf-v2 .bookshelf-search .search-inline input {
    height: 38px;
    padding-left: 18px;
    border: 0;
    border-radius: var(--g-radius-pill) 0 0 var(--g-radius-pill);
    background-color: transparent;
    color: var(--g-ink);
}

html.g-glass .shelf-v2 .bookshelf-search .search-inline input:focus {
    background-color: transparent;
    box-shadow: none;
}

html.g-glass .shelf-v2 .bookshelf-search .btn-search {
    width: 38px;
    height: 32px;
    margin: 3px 4px 3px 0;
    border-radius: var(--g-radius-pill);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 60%),
        var(--g-accent);
    box-shadow: 0 4px 12px rgba(239, 77, 0, .26);
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .shelf-v2 .bookshelf-search .btn-search:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 60%),
        var(--g-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(239, 77, 0, .32);
}

html.g-glass .shelf-v2 .bookshelf-search .btn-search:active {
    transform: scale(.94);
    transition-duration: .08s;
}

html.g-glass .shelf-v2 .bookshelf-search .btn-search [class*="icon-font-"] {
    font-size: 20px;
}

/* 「清除搜尋」 */
html.g-glass .shelf-v2 .bookshelf-search .btn--link.search {
    color: var(--g-muted);
}

/* ---- 書櫃／影音櫃／下載 Adobe DRM ----
   整條白底＋底部橘線 → 一排置中的玻璃膠囊，跟列表頁的類型 tab 同一個語彙。
   .nav-justified 會把三顆撐成等寬，改回 auto 讓膠囊貼合文字。 ---- */
html.g-glass .shelf-v2 nav.nav-class.nav-class-tab {
    background-color: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

html.g-glass .shelf-v2 .nav-class-tab .nav {
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
}

html.g-glass .shelf-v2 .nav-class-tab .nav-item {
    flex: 0 0 auto;
    max-width: none;
}

html.g-glass .shelf-v2 .nav-class-tab .nav-link {
    height: 38px;
    padding: 0;
    align-items: center;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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);
    font-size: 14px !important;
    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;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .nav-class-tab .nav-link {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .nav-class-tab .nav-link > .txt {
    padding: 0 18px;
    font-size: inherit;
    font-weight: inherit;
}

html.g-glass .shelf-v2 .nav-class-tab .nav-link:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

html.g-glass .shelf-v2 .nav-class-tab .nav-link:active {
    transform: scale(.95);
    transition-duration: .08s;
}

html.g-glass .shelf-v2 .nav-class-tab .nav-link.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);
}

/* 膠囊化之後不需要 active 的橘色底線 */
html.g-glass .shelf-v2 .nav-class-tab .nav-link.active > .txt::after {
    display: none;
}

/* ---- 資料夾路徑（書櫃 › 資料夾 › …）----
   原本是 #eee 的灰膠囊，改成玻璃膠囊；目前所在的那一層跟列表頁麵包屑
   一樣用橘字加粗。分隔用的 chevron 是 ::after，只換顏色不動位置。 ---- */
html.g-glass .shelf-v2 .folder-location > i {
    color: var(--g-muted);
    opacity: .75;
}

html.g-glass .shelf-v2 .folder-location .btn-folderLocation {
    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 0 0 1px rgba(88, 101, 114, .07);
    color: var(--g-muted);
    transition: background var(--g-dur-state) ease, color 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))) {
    html.g-glass .shelf-v2 .folder-location .btn-folderLocation {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .folder-location .btn-folderLocation:hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

html.g-glass .shelf-v2 .folder-location .btn-folderLocation:last-of-type {
    color: var(--g-accent-ink);
    font-weight: 600;
}

html.g-glass .shelf-v2 .folder-location .btn-folderLocation::after {
    color: var(--g-muted);
    opacity: .45;
}

/* ---- 控制列的兩顆例外：⋮ 是方形圖示鈕、「編輯」沒有下拉箭頭，
   都不吃共用膠囊那條左右 30px 的內距 ---- */

/* pubu.ui 有一條 .btn,.btn-lg,.btn-sm{height:auto!important}，所以共用膠囊
   那條 height:40px 對 .btn 完全沒有作用（列表頁的篩選鈕是靠 .class-filter
   .dropdown-toggle{height:40px!important} 才有 40px，內容庫沒有 .class-filter）。
   這裡改用 min-height 把高度撐起來，四顆鈕才會跟排序器切齊。 */
html.g-glass .shelf-v2 .edit-class-filter > div > .btn {
    min-height: 40px;
}

html.g-glass .shelf-v2 .dropdown-editMenu > .btn.icon-display {
    width: 40px;
    padding: 0 !important;
}

html.g-glass .shelf-v2 .dropdown-editMenu > .btn:not(.icon-display) {
    padding: 0 20px !important;
}

/* ---- 「編輯」與 ⋮ 的下拉、書卡右下角 ⋮ 的下拉 ----
   這三個是 Bootstrap 原生的實白 .dropdown-menu（分類／篩選那兩個
   .dropdownMenu-moreinfo 已經在列表頁那段處理掉了）。 ---- */
html.g-glass .shelf-v2 :is(.dropdown-editMenu, .dropdown-listmore) .dropdown-menu {
    padding: 8px 6px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 :is(.dropdown-editMenu, .dropdown-listmore) .dropdown-menu {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 :is(.dropdown-editMenu, .dropdown-listmore) .dropdown-item {
    border-radius: 12px;
    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);
}

html.g-glass .shelf-v2 :is(.dropdown-editMenu, .dropdown-listmore) .dropdown-item:hover,
html.g-glass .shelf-v2 :is(.dropdown-editMenu, .dropdown-listmore) .dropdown-item:focus {
    background-color: var(--g-control-hover);
    color: var(--g-accent-strong);
    transform: translateX(3px);
}

/* 手機的下拉是從畫面底部升起的抽屜，圓角只留上面兩顆 */
@media (max-width: 768.98px) {
    html.g-glass .shelf-v2 .dropdown.show > .dropdown-menu-mobile .dropdown-menu,
    html.g-glass .shelf-v2 .select.show > .dropdown-menu-mobile .dropdown-menu {
        border-radius: var(--g-radius-panel) var(--g-radius-panel) 0 0;
    }
}

/* ---- 資料夾卡 ---- */
html.g-glass .shelf-v2 .folder-list-group .folder {
    border: 1px solid var(--g-border);
    border-radius: 18px;
    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, .07),
                0 4px 14px rgba(45, 55, 64, .08);
    transition: transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .folder-list-group .folder {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .folder-list-group .folder:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .1),
                0 12px 28px rgba(45, 55, 64, .16);
}

html.g-glass .shelf-v2 .folder-list-group .folder:active {
    transform: scale(.99);
    transition-duration: .08s;
}

html.g-glass .shelf-v2 .folder-list-group .folder.active {
    border-color: var(--g-accent);
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), var(--g-accent-soft);
}

/* 資料夾圖示原本是 48px 的實心 Round 字型，換成品牌橘就變成一塊很重的色塊；
   改用 Material Icons Outlined 的同一個 ligature（字型已經載了，只換 family），
   線條感跟玻璃邊、麵包屑那條 chevron 才是同一組語彙。 */
html.g-glass .shelf-v2 .folder-list-group .icon-txt i {
    color: rgba(255, 107, 26, .8);
    transition: color var(--g-dur-state) ease;
}

html.g-glass .shelf-v2 .folder-list-group .icon-txt i::before {
    font-family: "Material Icons Outlined";
    font-size: 40px;
}

html.g-glass .shelf-v2 .folder-list-group .folder:hover .icon-txt i {
    color: var(--g-accent);
}

html.g-glass .shelf-v2 .folder-list-group .icon-txt .txt {
    color: var(--g-ink);
    font-weight: 600;
}

/* 整張卡是一個蓋滿卡片的連結，hover 的灰底改成品牌橘的淡底，圓角跟著卡片走 */
html.g-glass .shelf-v2 .folder-list-group.bookshelf-list-view .btn-folderMore {
    border-radius: 18px;
}

html.g-glass .shelf-v2 .folder-list-group.bookshelf-list-view .btn-folderMore::before {
    border-radius: inherit;
    background-color: var(--g-accent-soft);
}

/* ---- 書卡 ----
   封面的玻璃相框在 home-v2.css（跟首頁／列表頁同一組），這裡只補內容庫
   自己的部分：書名顏色、閱讀進度條、右下角的 ⋮。 ---- */
html.g-glass .shelf-v2 .cover-list .info-project h3,
html.g-glass .shelf-v2 .cover-list .info-project h3 > a {
    color: var(--g-ink);
}

html.g-glass .shelf-v2 .cover-list .read-progress {
    height: 4px;
    background-color: rgba(88, 101, 114, .13);
    box-shadow: inset 0 1px 1px rgba(45, 55, 64, .08);
}

html.g-glass .shelf-v2 .cover-list .read-progress .progress-bar {
    border-radius: var(--g-radius-pill);
    background: linear-gradient(90deg, var(--g-accent), var(--g-accent-strong));
    box-shadow: 0 0 10px rgba(239, 77, 0, .45);
}

html.g-glass .shelf-v2 .cover-list .dropdown-listmore > .dropdown-toggle {
    border-radius: 50%;
    color: var(--g-muted);
    transition: background-color var(--g-dur-state) ease, color var(--g-dur-state) ease,
                box-shadow var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

html.g-glass .shelf-v2 .cover-list .dropdown-listmore > .dropdown-toggle:hover,
html.g-glass .shelf-v2 .cover-list .dropdown-listmore > .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--g-control-active);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-accent-strong);
}

html.g-glass .shelf-v2 .cover-list .dropdown-listmore > .dropdown-toggle:active {
    transform: scale(.9);
    transition-duration: .08s;
}

/* ---- 下載 Adobe DRM 頁 ----
   一列一張白卡（.card-shadow 的黑影 + 直角）改成玻璃卡；頁首那條說明用
   同一組玻璃，但壓平成一條輕量的通知帶。 ---- */
html.g-glass .shelf-v2 .alert.alert-secondary {
    border: 1px solid var(--g-border);
    border-radius: 16px;
    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, .07);
    color: var(--g-muted);
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-list {
    border: 1px solid var(--g-border);
    border-radius: 18px;
    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, .07),
                0 4px 14px rgba(45, 55, 64, .08);
    transition: transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .alert.alert-secondary,
    html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-list {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-list:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--g-inset-line),
                0 0 0 1px rgba(88, 101, 114, .1),
                0 12px 28px rgba(45, 55, 64, .16);
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-info h4 {
    color: var(--g-ink);
    font-weight: 600;
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-info .time,
html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-state .state-txt {
    color: var(--g-muted);
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-state .btn {
    min-height: 40px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 2px 8px rgba(45, 55, 64, .07);
    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);
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-state .btn:not(.disabled):hover {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

html.g-glass .shelf-v2 .downloadDRM-group .downloadDRM-state .btn.disabled {
    color: var(--g-muted);
}

/* ---- 編輯模式 ----
   置底的編輯列原本貼著視窗底部，改成浮動玻璃 dock；
   封面上的勾選框圓角對齊書封相框。 ---- */
html.g-glass .shelf-v2 .bookshelf-content-editBar {
    pointer-events: auto;
    max-width: 680px;
    margin: 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-dock);
    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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .bookshelf-content-editBar {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .bookshelf-content-editBar .editBar-left .checkNumber-group {
    border-left-color: var(--g-divider);
}

html.g-glass .shelf-v2 .bookshelf-content-editBar .editBar-right [class*="btn-"] {
    transition: color var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out);
}

html.g-glass .shelf-v2 .bookshelf-content-editBar .editBar-right [class*="btn-"]:not(.disabled):hover {
    color: var(--g-accent-strong);
    transform: translateY(-1px);
}

html.g-glass .shelf-v2 .bookshelf-content-formEdit .formEdit-cover-checkbox .custom-control-label {
    border-radius: 13px;
    border-color: var(--g-border);
    background-color: rgba(40, 48, 58, .18);
}

html.g-glass .shelf-v2 .bookshelf-content-formEdit .formEdit-cover-checkbox [type="checkbox"]:checked + .custom-control-label {
    border-color: var(--g-accent);
    background-color: var(--g-accent-soft);
    box-shadow: 0 0 0 1px var(--g-accent-ring);
}

/* ---- 內容庫的彈窗（新增／編輯／移動資料夾、刪除確認、影音 QR code）---- */
html.g-glass .shelf-v2 .modal-content {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .shelf-v2 .modal-content {
        background: var(--g-surface-fallback);
    }
}

html.g-glass .shelf-v2 .modal-content .modal-header,
html.g-glass .shelf-v2 .modal-content .modal-footer {
    border-color: var(--g-divider);
}

/* 彈窗裡的輸入框（資料夾名稱）：面板上不再疊玻璃，用半透明實色 */
html.g-glass .shelf-v2 .modal-content .form-control {
    border: 1px solid var(--g-border);
    border-radius: 14px;
    background-color: var(--g-control-active);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
}

html.g-glass .shelf-v2 .modal-content .form-control:focus {
    background-color: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1px var(--g-accent-ring);
}

/* 規範 8.2：玻璃不可疊玻璃。移動／編輯資料夾彈窗裡也是同一組資料夾卡，
   在玻璃面板上要退成半透明實色，不能再帶自己的 backdrop-filter。 */
html.g-glass .shelf-v2 .modal-content .folder-list-group .folder {
    background: var(--g-control-hover);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 0 0 1px rgba(88, 101, 114, .07);
}

/* 手機的資料夾彈窗是整頁抽屜（高度 100vh），圓角要收掉 */
@media (max-width: 640.98px) {
    html.g-glass .shelf-v2 .listModal-style-mobileFull .modal:not(.listModal-fixed) .modal-content {
        border-radius: 0;
    }
}

/* ---- 手機 ---- */
@media (max-width: 768.98px) {
    html.g-glass .shelf-v2 .nav-class-tab .nav-link {
        height: 34px;
        font-size: 13px !important;
    }

    html.g-glass .shelf-v2 .nav-class-tab .nav-link > .txt {
        padding: 0 14px;
    }

    /* 捲動時這條 tab 會 position:fixed 貼在 header 下面（pubuUI-js-navAutoHide），
       透明底會讓書卡直接從底下穿過去，這時候才補一層玻璃底板。 */
    html.g-glass .shelf-v2 nav.nav-class.nav-class-tab.fixed {
        background:
            linear-gradient(135deg, var(--g-sheen), transparent 60%),
            var(--g-panel-surface) !important;
        -webkit-backdrop-filter: blur(var(--g-blur)) saturate(170%);
        backdrop-filter: blur(var(--g-blur)) saturate(170%);
        box-shadow: 0 6px 18px rgba(45, 55, 64, .12) !important;
    }

    html.g-glass .shelf-v2 .bookshelf-search .search-group {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
 * 短版結帳流程：內容玻璃底板
 * 購物車 /cart 與確認訂單 /cart/checkout 共用 .pubu-old-style.checkout 容器
 * （cart 是 #main、checkout 包在 form 裡），儲值金選方案 /storedValue/checkout
 * 是同一條流程的第一步，容器叫 .pubu-old-style.giftcard_checkout，一起收進來，
 * 只認 #wrap-content 直下的那一層，避免碰到 directPrinting 之類把同名 class
 * 塞在別的容器裡的頁面。結帳完成／ATM／LINE Pay 頁也是同一個容器，
 * 會一起變成底板，選方案 → 確認訂單 → 完成 前後才是同一塊板。
 *
 * 原本內容直接鋪在環境光上，文字與底色糊成一片。最小改動：
 * 在容器底下墊一片 panel 等級（.84）的玻璃板承載原內容，內部元素樣式一律不動。
 * 玻璃畫在 ::before 而不是容器本身 —— backdrop-filter 會讓元素變成 fixed 子孫的
 * containing block，置底的 .nav-subtotal 與容器內的 Bootstrap modal 都會被綁進板子裡
 * （規範 8-① 同一類地雷）。容器只加 position:relative，不設 z-index。
 * 只在 glassChrome 啟動過的頁面（html.g-glass）套用。
 * ============================================================ */
:root {
    /* 置底結帳列改成浮動 dock 後，內容底部要空出的高度 */
    --g-cartbar-clear: calc(var(--g-dock-height) + var(--g-dock-inset) * 2 + env(safe-area-inset-bottom, 0px));
}

html.g-glass #wrap-content > .pubu-old-style.checkout,
html.g-glass #wrap-content > form > .pubu-old-style.checkout,
html.g-glass #wrap-content > .pubu-old-style.giftcard_checkout {
    position: relative;
    width: min(calc(100% - var(--g-dock-inset) * 2), 1440px);
    /* 上：dock 底緣（#wrap-content 已避開）再留 20px；下：讓出浮動結帳列 */
    margin: 20px auto var(--g-cartbar-clear);
    padding: 12px 28px 28px !important;
}

/* 沒有置底結帳列的頁（結帳完成、ATM 帳號…）不用空那麼多。
   用後代選擇器：cart 的 <div id="cartList"/> 是自閉 div，HTML 會把後面的
   .nav-subtotal 都吞成它的子元素，不是容器的直接子元素 */
html.g-glass #wrap-content > .pubu-old-style.checkout:not(:has(.nav-subtotal)),
html.g-glass #wrap-content > form > .pubu-old-style.checkout:not(:has(.nav-subtotal)),
html.g-glass #wrap-content > .pubu-old-style.giftcard_checkout {
    margin-bottom: 28px;
}

html.g-glass #wrap-content > .pubu-old-style.checkout::before,
html.g-glass #wrap-content > form > .pubu-old-style.checkout::before,
html.g-glass #wrap-content > .pubu-old-style.giftcard_checkout::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-panel);
    /* 文字量大的面板：高光壓低（規範 .g-surface--panel） */
    background: linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .05) 42%, transparent 68%), 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-soft);
    pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass #wrap-content > .pubu-old-style.checkout::before,
    html.g-glass #wrap-content > form > .pubu-old-style.checkout::before,
    html.g-glass #wrap-content > .pubu-old-style.giftcard_checkout::before {
        background: var(--g-surface-fallback);
    }
}

/* ---- 置底金額與結帳列：原本是貼底的白色實色條，改成浮動玻璃 dock ---- */
html.g-glass .pubu-old-style.checkout .nav-subtotal {
    right: var(--g-dock-inset);
    bottom: calc(var(--g-dock-inset) + env(safe-area-inset-bottom, 0px));
    left: var(--g-dock-inset);
    min-height: var(--g-dock-height);
    padding: 8px 12px 8px 22px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-dock);
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-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);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .pubu-old-style.checkout .nav-subtotal {
        background: var(--g-surface-fallback);
    }
}

/* 結帳鈕：拉到 44px 觸控高度、規範的按鈕圓角 */
html.g-glass .pubu-old-style.checkout .nav-subtotal .backtoshopping {
    min-height: 44px;
    padding: 0 24px;
    border-radius: var(--g-radius-btn);
    font-weight: 600;
}

/* 回到頂端鈕疊在結帳列上方 */
html.g-glass body:has(.pubu-old-style.checkout .nav-subtotal) #gotop {
    bottom: calc(var(--g-cartbar-clear) + 8px);
}

/* 短版 footer 是一條 bg-white 的版權列，會從浮動結帳列底下露出一截白；
   這幾頁改成透明，字留著。<footer> 本身在 pubu.ui 還有一層 #F2F4F6，白條拿掉後
   會換成灰條露出來，所以兩層一起清。footer 用後代選擇器：cart 頁的 #main 因為
   <div id="cartList"/> 沒關到，footer 實際上被包在 #main（底板）裡面 */
html.g-glass body:has(#wrap-content > .pubu-old-style.checkout) #wrap-content footer,
html.g-glass body:has(#wrap-content > .pubu-old-style.checkout) #wrap-content footer .bg-white,
html.g-glass body:has(#wrap-content > form > .pubu-old-style.checkout) #wrap-content footer,
html.g-glass body:has(#wrap-content > form > .pubu-old-style.checkout) #wrap-content footer .bg-white,
html.g-glass body:has(#wrap-content > .pubu-old-style.giftcard_checkout) #wrap-content footer,
html.g-glass body:has(#wrap-content > .pubu-old-style.giftcard_checkout) #wrap-content footer .bg-white {
    background: transparent !important;
    border-top: 0 !important;
    color: var(--g-muted);
}

@media (max-width: 991.98px) {
    html.g-glass #wrap-content > .pubu-old-style.checkout,
    html.g-glass #wrap-content > form > .pubu-old-style.checkout,
    html.g-glass #wrap-content > .pubu-old-style.giftcard_checkout {
        /* 手機 #wrap-content 沒有避開 dock：dock 底緣 8 + 56 = 64，內容從 60 起算 */
        margin-top: calc(var(--g-dock-inset) + var(--g-dock-height) - 60px + 12px);
        padding: 16px 12px 20px !important;
    }

    html.g-glass .pubu-old-style.checkout .nav-subtotal {
        padding: 6px 8px 6px 16px;
    }
}

/* ============================================================
 * 儲值金選方案 /storedValue/checkout：板內元素
 * 底板已經是玻璃，板內一律用半透明實色（規範 8-② 玻璃不疊玻璃），
 * 動態只走 transform 與陰影，不碰 backdrop-filter（規範 8-③）。
 * 卡片 hover 有 transform，會生出堆疊脈絡，所以角落斜光不能再留 z-index:-1
 * （會被卡片自己的背景蓋掉），改成 0，再把文字層抬到 1。
 * ============================================================ */

/* ---- 標題列與「儲值金餘額」膠囊 ---- */
html.g-glass .pubu-old-style.giftcard_checkout .title-group h2 {
    color: var(--g-ink);
    font-weight: 600;
}

/* 餘額膠囊：白底控制項在白板上看不出來，改成品牌橘的淡色 chip */
html.g-glass .pubu-old-style.giftcard_checkout .title-group .money {
    padding: 0 14px;
    border: 1px solid var(--g-accent-ring);
    border-radius: var(--g-radius-pill);
    background: var(--g-accent-soft);
    box-shadow: inset 0 1px 0 var(--g-inset-line);
    color: var(--g-ink);
}

html.g-glass .pubu-old-style.giftcard_checkout .title-group .money .text-money {
    color: var(--g-accent-ink);
    font-weight: 600;
}

/* ---- 方案卡 ----
 * 卡片維持不透明：商品是頁面的主體，讓環境光透過來會讓金額字糊掉，
 * 玻璃只做底板，卡片是壓在板上的實體卡（規範 8-② 玻璃不疊玻璃的另一面）。
 * 只把平塗白換成帶斜向亮面的漸層，圓角、邊線與陰影跟著琉光的尺度走。 */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card {
    border: 1px solid rgba(88, 101, 114, .1);
    border-radius: 18px;
    background: linear-gradient(150deg, #fff 0%, #fdfeff 52%, #f6f9fd 100%);
    box-shadow: inset 0 1px 0 #fff, var(--g-shadow-soft);
    color: var(--g-ink);
    /* v2 給的是 transition:all .3s，收斂成只動這兩個屬性 */
    transition:
        transform var(--g-dur-state) var(--g-ease-spring),
        box-shadow var(--g-dur-state) var(--g-ease-out);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 #fff, var(--g-shadow);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card:active {
    transform: translateY(-1px) scale(.995);
}

/* 主打方案：底色轉暖，邊框與光暈走品牌橘 */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card_box2 .normal_card {
    border-color: var(--g-accent-ring);
    background: linear-gradient(150deg, #fff3e5 0%, #fffcf8 58%, #fff8f1 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 12px 34px rgba(251, 113, 0, .16),
        var(--g-shadow-soft);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card_box2 .normal_card:hover {
    box-shadow:
        inset 0 1px 0 #fff,
        0 18px 46px rgba(251, 113, 0, .22),
        var(--g-shadow);
}

/* ---- 角落斜光：原本是硬邊的綠／黃三角，改成低彩度的折射光楔 ---- */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .color2,
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .high_color2 {
    z-index: 0;
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .card_contant {
    position: relative;
    z-index: 1;
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .color2:before {
    border-top-color: rgba(120, 160, 230, .28);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .color2:after {
    border-top-color: rgba(120, 160, 230, .12);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .high_color2:before {
    border-top-color: rgba(255, 150, 40, .32);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .high_color2:after {
    border-top-color: rgba(255, 176, 60, .14);
}

/* ---- 卡片文字 ---- */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card #card_contant_txt {
    color: var(--g-ink);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card #card_contant_txt_h {
    color: var(--g-muted);
}

/* 「省下多少」原本是 #6dac00，在半透明白底上只有 2.6:1，壓深到過得了 AA */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card #card_contant_smalltxt {
    color: #2e8f5e;
}

/* ---- 購買鈕：主要動作維持實色橘 ---- */
html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-color: transparent;
    border-radius: var(--g-radius-pill);
    background: linear-gradient(180deg, var(--g-accent), var(--g-accent-strong));
    box-shadow: 0 6px 18px rgba(251, 113, 0, .28);
    color: #fff;
    font-weight: 600;
    transition:
        transform var(--g-dur-micro) var(--g-ease-out),
        box-shadow var(--g-dur-micro) var(--g-ease-out);
}

html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card:hover .btn-buy {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(251, 113, 0, .34);
}

/* ---- 「儲值金序號兌換」：外框橘鈕 → 玻璃控制項膠囊 ---- */
html.g-glass .pubu-old-style.giftcard_checkout .orangeLine_btn {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    background: var(--g-control-active);
    box-shadow: inset 0 1px 0 var(--g-inset-line), var(--g-shadow-soft);
    color: var(--g-accent-ink);
    font-weight: 600;
    transition:
        transform var(--g-dur-micro) var(--g-ease-out),
        box-shadow var(--g-dur-micro) var(--g-ease-out);
}

html.g-glass .pubu-old-style.giftcard_checkout .orangeLine_btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--g-inset-line), var(--g-shadow);
    color: var(--g-accent-strong);
    text-decoration: none;
}

/* 焦點環：鍵盤操作才顯示（規範 9.2） */
html.g-glass .pubu-old-style.giftcard_checkout .orangeLine_btn:focus-visible {
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
}

/* ---- 注意事項 ---- */
html.g-glass .pubu-old-style.giftcard_checkout #info_box_title {
    border-top-color: var(--g-divider);
    color: var(--g-ink);
}

html.g-glass .pubu-old-style.giftcard_checkout .info_box {
    color: var(--g-muted);
    line-height: 1.7;
}

/* 手機：主打卡的購買鈕本來就撐滿（.card_c 直排、鈕是它的直接子元素），
   一般卡的鈕多包了一層 div 所以縮成小顆，補成一樣寬，四張卡的觸控目標才一致 */
@media (max-width: 640.98px) {
    html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .btn-buy {
        width: 100%;
    }
}

/* ============================================================
 * 商品頁琉光（/ebook /magazine /newspaper /combo /media /album
 * 六種型別共用 product/page.jsp，<main> 掛 .product-v2）
 *
 * 分層照規範 2.1：
 *   Canvas   環境光，已由 glassChrome 注入
 *   Content  封面、書名、規格、簡介、章節、相關商品、評論 —— 一律不套玻璃，
 *            只用 --g-divider 的細線分段與紙感陰影
 *   Chrome   購買面板、追蹤／收藏／分享、展開鈕、標籤 —— 玻璃
 *
 * 商品卡（.cover-list）與標籤膠囊（.class-tag .btn）的樣式在 home-v2.css，
 * 由 :is(.home-v2, .list-v2, .product-v2) 共用，這裡不重寫。
 * 內容分頁（.class-tab）、麵包屑綁全站 html.g-glass，見「列表頁琉光」段。
 *
 * 另一半工作是壓縮空間（使用者驗收條件）：改版前 1440 寬的電子書頁 <main>
 * 高 2671px，空白多半來自 Bootstrap 的 mt-xl-5／py-sm-4／m-1 這些工具類，
 * 所以下面很多規則是帶 !important 的間距覆寫，不是樣式潔癖。
 * 第二輪（使用者驗收後）把主商品區改成 grid 三欄：簡介直接排在規格正下方的
 * 中欄，封面欄底下放 App 導流與宣告，填掉兩欄底下的空白（見「桌機」段）。
 * 實測（1440×900，stage 真資料）：
 *   ebook 2671→2188→2019、media 2398→2042→1780、
 *   magazine 2276→1913、combo 2354→2028、album 3361→2610
 * ============================================================ */

/* ---- 全頁節奏：麵包屑到內容的 48px 留白收成 14px ---- */
html.g-glass .product-v2 > .breadcrumb-bar {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

html.g-glass .product-v2 > .container {
    padding-top: 12px !important;
    padding-bottom: 24px !important;
}

/* 模組之間的分隔線改成規範的細線；上下內距 24 → 14 */
html.g-glass .product-v2 .list-border {
    border-top-color: var(--g-divider);
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

html.g-glass .product-v2 .list-title {
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--g-ink);
}

/* 「看更多」比照首頁：13px 粗體橘字，不是標題旁的大按鈕 */
html.g-glass .product-v2 .list-border > .d-flex .btn--link {
    margin-left: auto !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap;
}

html.g-glass .product-v2 .list-border > .d-flex {
    align-items: baseline !important;
    margin-bottom: 4px;
}

/* ============================================================
 * 主商品區：封面 ／ 書名與規格 ／ 購買面板
 * ============================================================ */
html.g-glass .product-v2 .product-info {
    align-items: flex-start;
}

/* ---- 封面：浮在環境光上的一張紙，hover 抬起 ----
   陰影畫在 <img> 而不是 .cover —— 套書與影音專輯的 .cover-group 用
   box-shadow 疊出「後面還有幾本」，畫在 .cover 上會把那個效果蓋掉。 ---- */
html.g-glass .product-v2 .product-info .cover-block .cover img {
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(45, 55, 64, .18), 0 2px 6px rgba(45, 55, 64, .08);
    transition: transform var(--g-dur-move) var(--g-ease-spring),
                box-shadow var(--g-dur-move) var(--g-ease-out);
}

html.g-glass .product-v2 .product-info .pubuUI-js-zoom_in:hover .cover img {
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(45, 55, 64, .24), 0 4px 10px rgba(45, 55, 64, .1);
}

/* 放大鏡改成玻璃圓鈕（原本是白色實色圓） */
html.g-glass .product-v2 .product-info .cover-block .icon-display.zoom_in {
    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 6px 16px rgba(45, 55, 64, .16);
    transition: transform var(--g-dur-state) var(--g-ease-spring),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .product-v2 .product-info .pubuUI-js-zoom_in:hover .icon-display.zoom_in {
    transform: scale(1.08);
    box-shadow: inset 0 1px 0 var(--g-inset-line), 0 8px 20px rgba(45, 55, 64, .22);
}

html.g-glass .product-v2 .product-info .pubuUI-js-zoom_in:active .icon-display.zoom_in {
    transform: scale(.94);
    transition-duration: .08s;
}

/* ---- 書名與評分 ---- */
html.g-glass .product-v2 .product-info .info-name {
    padding-top: 4px !important;
}

html.g-glass .product-v2 .product-info .info-name h1 {
    margin-bottom: 6px !important;
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
    font-weight: 600;
    line-height: 1.34;
    color: var(--g-ink);
}

html.g-glass .product-v2 .product-info .rating-stars {
    align-items: center;
    margin-bottom: 6px !important;
}

html.g-glass .product-v2 .rating-stars .txt {
    color: var(--g-muted);
    font-size: 12.5px;
}

/* ---- 作者／譯者／出版 ---- */
html.g-glass .product-v2 .product-info .list-metaAuthor {
    margin: 2px 0 !important;
    font-size: 13px;
    line-height: 1.7;
    color: var(--g-muted);
}

html.g-glass .product-v2 .product-info .list-metaAuthor > span:first-child {
    display: inline-block;
    min-width: 44px;
    color: var(--g-muted);
    font-size: 12.5px;
    letter-spacing: .04em;
}

html.g-glass .product-v2 .product-info .list-metaAuthor .text--link {
    color: var(--g-ink);
    font-weight: 600;
    transition: color var(--g-dur-state) ease;
}

html.g-glass .product-v2 .product-info .list-metaAuthor .text--link:hover {
    color: var(--g-accent-strong);
}

/* ---- 追蹤／收藏／分享／劃線：一組玻璃膠囊 ---- */
html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec,
html.g-glass .product-v2 .product-info .btn--hl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    min-height: 30px;
    margin: 2px 4px 2px 0 !important;
    padding: 0 12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    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;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec,
    html.g-glass .product-v2 .product-info .btn--hl {
        background: var(--g-surface-fallback);
    }
}

/* 圖示與文字之間交給 gap，工具類的 mr-1／mr-2 收掉 */
html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec > [class*="fa-"],
html.g-glass .product-v2 .product-info .btn--hl > [class*="fa-"] {
    margin-right: 0 !important;
    font-size: 13px;
}

html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec:hover,
html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec:focus-visible,
html.g-glass .product-v2 .product-info .btn--hl:hover,
html.g-glass .product-v2 .product-info .btn--hl:focus-visible {
    background: linear-gradient(135deg, var(--g-sheen), transparent 60%), rgba(255, 255, 255, .86);
    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);
    text-decoration: none;
}

html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec:active,
html.g-glass .product-v2 .product-info .btn--hl:active {
    transform: scale(.96);
    transition-duration: .08s;
}

/* 已收藏／已追蹤：accent 的選取態（規範：accent 只代表「已選取／可操作」） */
html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec[data-followed="true"],
html.g-glass .product-v2 .product-info #saveStatus.btn--outline-primarySec {
    background: var(--g-accent-soft);
    box-shadow: inset 0 0 0 1px var(--g-accent-ring);
    color: var(--g-accent-ink);
}

html.g-glass .product-v2 .product-info .info-btngroup {
    margin-top: 8px;
}

/* ---- 規格表：只靠字色分「標籤／值」，列高 32 → 26 ----
   第一版每列有一條細線，雙欄之後左右兩列的高度常常不一樣（檔案格式那格
   會折行），線就參差不齊，使用者退回；桌機不畫線，手機單欄才有（見下方）。
   「真的有 col 子元素」的那層 .row 才是資料列，JSP 有幾個純佔位的 col。 ---- */
html.g-glass .product-v2 .product-info .list-info-table {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

html.g-glass .product-v2 .product-info .list-info-table > [class*="col-"] {
    padding: 0 12px 0 0;
    border-right: 0 !important;
}

html.g-glass .product-v2 .product-info .list-info-table .row:has(> [class*="col-"]) {
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.6;
}

html.g-glass .product-v2 .product-info .list-info-table .row > [class*="col-"]:first-child {
    color: var(--g-muted);
    font-size: 12.5px;
    letter-spacing: .03em;
}

html.g-glass .product-v2 .product-info .list-info-table .row > [class*="col-"]:last-child {
    color: var(--g-ink);
}

html.g-glass .product-v2 .product-info .list-info-table a {
    color: var(--g-accent-ink);
}

html.g-glass .product-v2 .product-info .drm-free-help-link,
html.g-glass .product-v2 .product-info .drm-free-help-link:hover,
html.g-glass .product-v2 .product-info .drm-free-help-link:focus,
html.g-glass .product-v2 .product-info .drm-free-help-link:active {
    text-decoration: none;
}

/* ---- 活動列 ---- */
html.g-glass .product-v2 .product-activity-desktop,
html.g-glass .product-v2 .product-activity-mobile {
    margin-top: 8px !important;
}

html.g-glass .product-v2 .product-info .list-border.border-md-top {
    padding-top: 8px !important;
    border-top: 0 !important;
}

html.g-glass .product-v2 .badge.badge-light-gray-dark {
    border-radius: var(--g-radius-pill);
    background: var(--g-accent-soft) !important;
    color: var(--g-accent-ink) !important;
    font-weight: 600;
}

/* ---- App 下載橫幅：圓角與陰影跟其他卡一致，上緣留白 24 → 12 ---- */
html.g-glass .product-v2 .app-download-medium-style {
    margin-top: 12px !important;
}

html.g-glass .product-v2 .app-download-block {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--g-shadow-soft);
}

/* ============================================================
 * 購買面板：本頁唯一的玻璃面板（規範 .g-surface--panel，.84）
 *
 * 玻璃畫在 ::before 而不是容器本身（規範 8-①）：雙格式書的「選擇閱讀格式」
 * Bootstrap modal（component/modal-readerFormat.jsp）就輸出在這個盒子裡的
 * .shop-btngroup 底下，容器一帶 backdrop-filter 就變成那個 fixed modal 的
 * containing block —— modal 被困在面板內、面板長出 y 軸捲軸、整頁跑版。
 * 容器只加 position:relative，不設 z-index、不做任何會建立 stacking context
 * 的事（否則 modal 會被畫在 body 層級的 .modal-backdrop 底下）。
 * 面板內的控制項一律用半透明實色，不再疊玻璃（規範 8-②）。
 * ============================================================ */
html.g-glass .product-v2 .product-info > .info-block.col-lg-auto > .border {
    position: relative;
    padding: 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--g-radius-panel);
    background: transparent;
    box-shadow: none !important;
}

html.g-glass .product-v2 .product-info > .info-block.col-lg-auto > .border::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--g-border);
    border-radius: inherit;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .05) 42%, transparent 68%),
        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);
    pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .product-v2 .product-info > .info-block.col-lg-auto > .border::before {
        background: var(--g-surface-fallback);
    }
}

/* ---- 版本選擇（一般版／下載版／長期訂閱…）：分段控制項 ----
   一條半透明軌道，選項是軌道裡的格子，選中的那格浮成白色滑塊、右上角一枚橘點，
   不再整塊染橘。pubu.ui 給 .product-class 的 height:calc(100% - .5rem)（外層 col 又
   min-height:100%）會把價格擠到貼底、甚至溢出，這裡把高度還給內容。
   「說明」那列（.w-100）留在軌道外面：絕對定位到軌道下方，軌道用 :has 多留底部空間。 ---- */
html.g-glass .product-v2 .product-class-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0 0 10px !important;
    padding: 3px !important;
    border: 0;
    border-radius: 15px;
    background: rgba(45, 55, 64, .07);
    box-shadow: inset 0 0 0 1px rgba(45, 55, 64, .05), inset 0 1px 2px rgba(45, 55, 64, .06);
}

html.g-glass .product-v2 .product-class-group:has(> .w-100) {
    margin-bottom: 32px !important;
}

html.g-glass .product-v2 .product-class-col {
    flex: 1 1 96px;
    min-width: 0;
    min-height: 0;
}

html.g-glass .product-v2 .product-class {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 12px 9px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--g-ink);
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .product-v2 .product-class:hover {
    background: rgba(255, 255, 255, .55);
    transform: none;
    box-shadow: none;
}

html.g-glass .product-v2 .product-class:active {
    transform: scale(.97);
    transition-duration: .08s;
}

html.g-glass .product-v2 .product-class.active,
html.g-glass .product-v2 .product-class.active:hover {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(45, 55, 64, .06),
                0 1px 2px rgba(45, 55, 64, .08),
                0 6px 16px rgba(45, 55, 64, .12);
}

/* 選中標記：右上角一枚橘點加一圈淡暈 */
html.g-glass .product-v2 .product-class::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-accent);
    box-shadow: 0 0 0 3px var(--g-accent-soft);
    opacity: 0;
    transform: scale(.4);
    transition: opacity var(--g-dur-state) ease, transform var(--g-dur-move) var(--g-ease-spring);
}

html.g-glass .product-v2 .product-class.active::after {
    opacity: 1;
    transform: none;
}

html.g-glass .product-v2 .product-class .txt {
    padding-right: 14px;
    color: var(--g-muted);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .02em;
}

html.g-glass .product-v2 .product-class .price {
    color: var(--g-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

html.g-glass .product-v2 .product-class.active .txt {
    color: var(--g-ink);
}

html.g-glass .product-v2 .product-class.active .price {
    color: var(--g-accent-ink);
}

html.g-glass .product-v2 .product-class-group > .w-100 {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 5px;
    padding: 0 6px !important;
}

html.g-glass .product-v2 .product-class-group .modal-info {
    width: auto;
    padding: 0;
    font-size: 12px;
}

html.g-glass .product-v2 .product-class-group .modal-info .text-gray-600 {
    color: var(--g-muted) !important;
}

/* ---- 價格 ---- */
html.g-glass .product-v2 .info-price .h5-sm,
html.g-glass .product-v2 .info-price .h6 {
    margin-bottom: 2px !important;
    color: var(--g-muted) !important;
    font-size: 12.5px;
    letter-spacing: .04em;
}

html.g-glass .product-v2 .info-price .row {
    margin-bottom: 8px !important;
}

html.g-glass .product-v2 .info-price .price {
    color: var(--g-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

html.g-glass .product-v2 .info-price .price-original {
    color: var(--g-muted);
    font-size: 12.5px;
}

html.g-glass .product-v2 .info-price .sale-off .txt {
    padding: 3px 10px;
    border-radius: var(--g-radius-pill);
    box-shadow: 0 4px 12px rgba(216, 53, 43, .26);
    font-size: 12px;
    font-weight: 600;
}

html.g-glass .product-v2 .info-price .product-code {
    margin-top: 2px;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--g-divider) !important;
}

html.g-glass .product-v2 .info-price .product-code .btn--link {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--g-accent-ink);
    font-size: 13px;
    font-weight: 600;
    transition: color var(--g-dur-state) ease;
}

html.g-glass .product-v2 .info-price .product-code .btn--link [class*="icon--"] {
    transition: transform var(--g-dur-state) var(--g-ease-out);
}

html.g-glass .product-v2 .info-price .product-code .btn--link:hover [class*="icon--"] {
    transform: translateX(3px);
}

/* ---- 購買按鈕組 ---- */
html.g-glass .product-v2 .shop-btngroup {
    margin-top: 12px;
}

html.g-glass .product-v2 .shop-btngroup hr {
    margin: 8px 0;
    border-top-color: var(--g-divider);
}

html.g-glass .product-v2 .shop-btngroup .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    height: 46px;
    margin: 5px 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--g-radius-btn);
    font-size: 15px;
    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;
}

/* 主要動作：購買 */
html.g-glass .product-v2 .shop-btngroup .btn.btn--primary {
    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 10px 24px rgba(239, 77, 0, .26);
    color: #fff;
}

html.g-glass .product-v2 .shop-btngroup .btn.btn--primary:hover,
html.g-glass .product-v2 .shop-btngroup .btn.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 14px 30px rgba(239, 77, 0, .34);
}

/* 次要動作：加入購物車、試看、閱讀 */
html.g-glass .product-v2 .shop-btngroup .btn.btn--outline-primary {
    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);
}

html.g-glass .product-v2 .shop-btngroup .btn.btn--outline-primary:hover,
html.g-glass .product-v2 .shop-btngroup .btn.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 8px 20px rgba(255, 107, 26, .18);
}

/* 幽靈動作：贈書給朋友 */
html.g-glass .product-v2 .shop-btngroup .btn.btn--outline-secondary {
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-ink);
    font-size: 14px;
}

html.g-glass .product-v2 .shop-btngroup .btn.btn--outline-secondary:hover,
html.g-glass .product-v2 .shop-btngroup .btn.btn--outline-secondary:focus-visible {
    background: var(--g-control-hover);
    box-shadow: inset 0 0 0 1px var(--g-border), 0 6px 16px rgba(45, 55, 64, .1);
    color: var(--g-ink);
    transform: translateY(-1px);
}

html.g-glass .product-v2 .shop-btngroup .btn:active {
    transform: scale(.975);
    transition-duration: .08s;
}

html.g-glass .product-v2 .shop-btngroup .btn.disabled,
html.g-glass .product-v2 .shop-btngroup .btn:disabled {
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-muted);
    transform: none;
}

/* ============================================================
 * 下半頁：組合內容、簡介分頁、章節、標籤、相關商品、評論
 * ============================================================ */
html.g-glass .product-v2 > .container > article:nth-of-type(2) {
    margin-top: 14px !important;
}

/* ---- 套書的「組合商品包含」----
   這一塊是一個沒有 overlay 的 Bootstrap modal（.listModal-modal 直接顯示在
   頁面上），所以底板是 .modal-content 的白底。灰色 .listModal-bg 收成透明，
   .modal-content 改成紙卡：不加 backdrop-filter，避免把 modal 內的
   fixed 子孫綁進來（規範 8-①）。 ---- */
html.g-glass .product-v2 #product-combo {
    margin-top: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-top-color: var(--g-divider);
}

html.g-glass .product-v2 #product-combo .listModal-bg.bg-light {
    background: transparent !important;
}

html.g-glass .product-v2 .listModal-modal .modal-content {
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 18px rgba(45, 55, 64, .07);
}

html.g-glass .product-v2 .listModal-modal .modal-body {
    padding: 6px;
}

html.g-glass .product-v2 .cover-list-level .info-slide {
    border-radius: 14px;
    background: rgba(255, 255, 255, .46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .product-v2 .cover-list-level .info-slide:hover {
    background: rgba(255, 255, 255, .74);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--g-border), 0 10px 24px rgba(45, 55, 64, .12);
}

/* ---- 簡介／目錄／作者（.product-intro，在 .product-info 裡，桌機由 grid 排到中欄） ---- */
html.g-glass .product-v2 .product-intro {
    border-top: 0 !important;
}

/* 收合漸層：pubu.ui 在 .collapse.hidden-height::before 塗一道「透明 → 白」的
   漸層當淡出，鋪在環境光上就是一塊白（使用者：「相對於背景變奇怪的色塊」）。
   改用 mask 把內容本身淡出，不再塗任何顏色；展開（.hidden-height-none）就不遮。
   影音的集數列表、作者列的收合也是同一個元件，一起改。 */
html.g-glass .product-v2 .list-group-collapse .collapse.hidden-height::before {
    display: none;
}

html.g-glass .product-v2 .list-group-collapse .collapse.hidden-height:not(.hidden-height-none) {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

/* 行銷活動 iframe（#campaign-iframe，見桌機 grid 段）在 DOM 上是放在 .collapse 裡面，
   只是被活動頁腳本絕對定位到 #info-content；上面那道 mask 以 .collapse 自己的框
   （純文字高度，約 2900px）為範圍，iframe 超出框的 8000 多 px 整個被遮成透明 ——
   正式站活動頁「顯示到一半就變白」就是這個。有這顆 iframe 就不套遮罩；
   page.jsp 的 fallback（iframe 沒現身、收合復活）會在 #info-content 掛
   .campaign-fallback，那時遮罩才套回來。 */
html.g-glass .product-v2 #info-content:not(.campaign-fallback) .collapse:has(#campaign-iframe) {
    -webkit-mask-image: none;
    mask-image: none;
}

/* 分頁列右端那道「白 → 透明」的橫捲提示，同樣是一塊白；商品頁最多四顆分頁，塞得下 */
html.g-glass .product-v2 .nav-scroll::after {
    display: none;
}

/* ---- 兩則宣告（注意事項：成人商品；版權保護：防盜名單出版社）----
   桌機緊湊版 .product-notices 排在封面欄底下（page.jsp 封面欄內），
   手機沿用原本全寬的那一段（加了 .product-notices-mobile.d-lg-none）。
   兩邊都包成一顆 dock 等級（.62）的白玻璃卡 —— 第一版是裸的灰字，
   使用者：「一段文字在那邊裸奔，跟跑版沒兩樣」。 ---- */
html.g-glass .product-v2 .product-notices,
html.g-glass .product-v2 .product-notices-mobile .bg-light {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--g-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, var(--g-sheen), rgba(255, 255, 255, .08) 46%, transparent 70%),
        var(--g-dock-surface) !important;
    -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-muted);
    font-size: 12px;
    line-height: 1.6;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.g-glass .product-v2 .product-notices,
    html.g-glass .product-v2 .product-notices-mobile .bg-light {
        background: var(--g-surface-fallback) !important;
    }
}

/* 兩則之間一條細線 */
html.g-glass .product-v2 .product-notice + .product-notice {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--g-divider);
}

html.g-glass .product-v2 .product-notice h4 {
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g-ink);
}

/* 手機那段是 .row：清掉負邊距讓卡片對齊內容，py-4 的格子收成 8px */
html.g-glass .product-v2 .product-notices-mobile {
    padding: 0 !important;
}

html.g-glass .product-v2 .product-notices-mobile .bg-light {
    margin-top: 4px;
    padding: 4px 14px !important;
}

html.g-glass .product-v2 .product-notices-mobile [class*="col-"] {
    padding: 8px 0 !important;
    font-size: 12.5px;
}

html.g-glass .product-v2 .product-notices-mobile h4 {
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--g-ink);
}

html.g-glass .product-v2 .product-notices-mobile hr {
    margin: 0 !important;
    border-top-color: var(--g-divider);
}

/* ---- 簡介／目錄／作者的內文 ---- */
html.g-glass .product-v2 .tab-content {
    color: var(--g-ink);
    line-height: 1.8;
}

html.g-glass .product-v2 .tab-content a {
    color: var(--g-accent-ink);
}

/* 「更多」展開鈕：玻璃膠囊 */
html.g-glass .product-v2 .collapse-btnblock .btn,
html.g-glass .product-v2 .pubuUI-js-btn-listmore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-pill);
    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-muted);
    font-size: 12.5px;
    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;
}

html.g-glass .product-v2 .collapse-btnblock .btn:hover,
html.g-glass .product-v2 .pubuUI-js-btn-listmore:hover {
    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);
}

/* ---- 章節／集數列表（影音、專輯）：整列可點，hover 抬起 ----
   收合高度 --collapse-hidden-height 是 pubu.ui 在 ready 時依實際列高算的，
   這裡改列高不會讓收合切在半列上。 ---- */
html.g-glass .product-v2 .list-video-table > [class*="col-"] {
    min-height: 44px;
    padding: 7px 12px;
    border-radius: 12px;
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .product-v2 .list-video-table > [class*="col-"]::after {
    background-color: var(--g-divider);
}

html.g-glass .product-v2 .list-video-table > [class*="col-"]:hover {
    background: rgba(255, 255, 255, .62);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--g-border), 0 8px 20px rgba(45, 55, 64, .1);
}

html.g-glass .product-v2 .list-video-table > [class*="col-"]:hover::after {
    opacity: 0;
}

html.g-glass .product-v2 .list-video-table .list-txt .txt {
    color: var(--g-ink);
    font-size: 13.5px;
}

html.g-glass .product-v2 .list-video-table .list-txt .time {
    color: var(--g-muted);
    font-size: 12.5px;
}

html.g-glass .product-v2 .list-video-table .btn-video {
    flex: none;
    transition: transform var(--g-dur-state) var(--g-ease-spring);
}

html.g-glass .product-v2 .list-video-table > [class*="col-"]:hover .btn-video {
    transform: scale(1.1);
}

/* ---- 標籤列：膠囊樣式在 home-v2.css 共用，這裡只收上下留白。
        列表頁的 .class-tag 是單行橫捲，商品頁的標籤是導覽入口，維持換行。 ---- */
html.g-glass .product-v2 .class-tag {
    padding: 2px 0 4px !important;
}

/* ---- 評論：一則評論原本 85px（4em 頭像 + 灰底留言框 + 獨立的按讚列），
        壓成 52px 的一列：34px 頭像、留言文字直接排在名字底下、
        按讚與回覆縮成 12px 的小字。 ---- */
html.g-glass .product-v2 #commentView {
    margin-top: 4px;
}

html.g-glass .product-v2 #commentView > .w-md-25 .rating-stars {
    margin: 2px 0 6px !important;
}

html.g-glass .product-v2 #commentView .progress {
    height: 8px;
    border-radius: var(--g-radius-pill);
    background: var(--g-control);
}

html.g-glass .product-v2 #commentView .progress-bar {
    border-radius: var(--g-radius-pill);
    background: var(--g-accent) !important;
}

html.g-glass .product-v2 #commentView .rounded.border {
    padding: 10px !important;
    border-color: var(--g-divider) !important;
    border-radius: 14px !important;
}

html.g-glass .product-v2 #commentView .rounded.border > .mt-3 {
    margin-top: 6px !important;
    color: var(--g-muted);
    font-size: 12.5px;
}

html.g-glass .product-v2 #commentView .btn {
    border-radius: var(--g-radius-btn);
    transition: background var(--g-dur-state) ease,
                transform var(--g-dur-micro) var(--g-ease-out),
                box-shadow var(--g-dur-state) ease;
}

html.g-glass .product-v2 #commentView .btn.btn--outline-light {
    border: 0;
    background: var(--g-control);
    box-shadow: inset 0 0 0 1px var(--g-divider);
    color: var(--g-muted);
}

html.g-glass .product-v2 #commentView [data-comment-card] > .d-flex:first-child {
    align-items: center;
    margin-bottom: 2px !important;
}

html.g-glass .product-v2 #commentView [data-comment-card] > .d-flex:first-child > div:first-child {
    width: 34px !important;
    height: 34px !important;
    flex: none;
}

html.g-glass .product-v2 #commentView [data-comment-card] .font-weight-bold {
    font-size: 13.5px;
}

html.g-glass .product-v2 #commentView [data-comment-card] .text-muted {
    font-size: 12px;
}

/* 名字與留言之間那個永遠空的 div */
html.g-glass .product-v2 #commentView [data-comment-card] > .mb-2:not(.alert) {
    display: none;
}

html.g-glass .product-v2 #commentView [data-comment-card] > .alert-light {
    margin: 0 0 2px 44px !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--g-ink);
    font-size: 13.5px;
    line-height: 1.7;
}

html.g-glass .product-v2 #commentView [data-comment-card] > .d-flex.ml-3 {
    margin-left: 44px !important;
    font-size: 12px;
}

html.g-glass .product-v2 #commentView [data-comment-card] hr {
    margin: 8px 0;
    border-top-color: var(--g-divider);
}

/* ============================================================
 * 桌機（≥992）：主商品區改三欄 grid，把單欄的資訊區攤成雙欄
 * ============================================================ */
@media (min-width: 992px) {
    /* 主商品區從 Bootstrap 的 flex row 改成 grid：
         封面 ｜ 書名、規格   ｜ 購買面板
         封面 ｜ 簡介分頁     ｜ 購買面板
       簡介以前是下半頁第一個全寬區塊，中欄底下空一截、封面底下也空一截；
       搬進 .product-info 之後用 grid-area 排到規格正下方，封面欄底下則放
       App 導流與宣告（JSP 直接放在封面欄內，d-lg-block）。
       手機不用 grid：.product-intro 是 col-12，照 DOM 順序排在評分卡之後。
       js-printedbook 那組隱藏的封面欄／資訊欄是同樣的 class，display:none 的
       grid item 不佔格，所以 KS 商品切換到那組時版面一樣。 */
    html.g-glass .product-v2 .product-info {
        display: grid;
        grid-template-columns: 25% minmax(0, 1fr) auto;
        grid-template-areas:
            "cover info  buy"
            "cover intro buy";
        align-items: start;
    }

    /* Bootstrap col 的 flex/max-width 在 grid 裡沒意義，width 交給 stretch；
       封面欄的 mx-auto 要清掉 —— grid item 一有 auto margin 就不 stretch，
       影音那種封面（圖是絕對定位）會縮成 0 寬。購買面板的 316px 是 inline style，
       這裡的 width:auto 蓋不掉它，正好當第三欄的寬。 */
    html.g-glass .product-v2 .product-info > .col-md-3,
    html.g-glass .product-v2 .product-info > section.info-block,
    html.g-glass .product-v2 .product-info > .info-block.col-lg-auto,
    html.g-glass .product-v2 .product-info > .product-intro {
        width: auto;
        max-width: none;
        flex: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html.g-glass .product-v2 .product-info > .col-md-3 {
        grid-area: cover;
    }

    html.g-glass .product-v2 .product-info > section.info-block {
        grid-area: info;
    }

    html.g-glass .product-v2 .product-info > .info-block.col-lg-auto {
        grid-area: buy;
    }

    html.g-glass .product-v2 .product-info > .product-intro {
        grid-area: intro;
        padding-top: 8px !important;
        padding-bottom: 0 !important;
    }

    /* 簡介搬到 grid 最底下佔滿三欄，兩種情況：
       ① 展開（.intro-expanded，page.jsp 在「更多」切換後掛）：長簡介展開後
          塞在 ~760px 的中欄、兩側從封面欄與購買面板結束後整片空白，銷售反應
          「展開卻在中間、左右空白很奇怪」；收合時（250px）仍留在中欄保住密度。
       ② 行銷活動 iframe（#campaign-iframe）：
       行銷會把 <iframe id="campaign-iframe" src="…/campaign/…?f=iframe"> 連同一段
       <style> 直接寫進商品簡介（DB 內容，不經 JSP，例：ebook/673474、594118）；
       iframe 內頁的 importProduct-campaign.js 會回頭把 parent 的 #info-content
       文字設成透明、高度撐成活動頁內文高，再把 iframe 絕對定位蓋上去 ——
       整個「簡介」分頁等於被活動頁取代，那段 <style> 也順手關掉了「更多」收合。
       活動頁是照 .container 全寬設計的，塞進 ~440px 的中欄會被壓成 12000px
       高的細長條，所以有這顆 iframe 時整列讓給它。
       跨源時（stage 嵌 www 的活動頁）腳本進不了 parent、iframe 維持
       display:none、只剩純文字，任何 layout 都一樣，不在這裡救。 */
    html.g-glass .product-v2 .product-info:is(.intro-expanded, :has(#info-content #campaign-iframe)) {
        grid-template-areas:
            "cover info  buy"
            "cover .     buy"
            "intro intro intro";
    }

    html.g-glass .product-v2 .product-info:is(.intro-expanded, :has(#info-content #campaign-iframe)) > .product-intro {
        margin-top: 20px;
    }

    /* 封面欄底下的 App 導流：欄寬只有 ~330px，pubu.ui 的 .product-info 小版
       （112px、手機圖）再壓一點，兩句文案改直排 */
    html.g-glass .product-v2 .product-info > .col-md-3 .app-download-medium-style {
        margin-top: 14px !important;
    }

    html.g-glass .product-v2 .product-info > .col-md-3 .app-download-block {
        height: 100px;
    }

    html.g-glass .product-v2 .product-info > .col-md-3 .app-download-txt h4 {
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    html.g-glass .product-v2 .product-info > .col-md-3 .app-download-txt h4 span {
        display: block;
        margin: 0;
    }

    html.g-glass .product-v2 .product-info > .col-md-3 .app-download-txt > .col {
        padding-left: 8px;
    }

    /* 規格表原本一列一項（col-xl-6 的 xl 比視窗還寬，永遠不生效），
       改成固定兩欄，10 列的規格從 296px 收成 148px。 */
    html.g-glass .product-v2 .product-info .list-info-table > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    html.g-glass .product-v2 .product-info .list-info-table .row > [class*="col-"]:first-child {
        flex: 0 0 40%;
        max-width: 40%;
    }

    html.g-glass .product-v2 .product-info .list-info-table .row > [class*="col-"]:last-child {
        flex: 0 0 60%;
        max-width: 60%;
    }

    /* 作者／譯者／出版原本各佔一列（126px），排成同一行剩 42px。
       手機欄寬不夠，照樣換行，所以只在桌機套。 */
    html.g-glass .product-v2 .product-info .info-name-metaAuthor,
    html.g-glass .product-v2 .product-info .list-metaAuthor.list-group-collapse {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 18px;
    }

    html.g-glass .product-v2 .product-info .info-name-metaAuthor > .list-metaAuthor,
    html.g-glass .product-v2 .product-info .list-metaAuthor .class-more {
        margin: 0 !important;
    }

    /* 相關商品卡收成首頁的 200px 卡寬：同一列看得到更多本，列高也跟著降 */
    html.g-glass .product-v2 .cover-list .row > .col {
        flex: 0 0 200px;
        max-width: 200px;
        padding: 8px !important;
    }
}

/* ============================================================
 * 平板與手機
 * ============================================================ */
@media (max-width: 991.98px) {
    html.g-glass .product-v2 > .breadcrumb-bar {
        margin-top: 10px !important;
    }

    /* 麵包屑收成單行橫捲，原本三層會折成三行（73px） */
    html.g-glass .product-v2 > .breadcrumb-bar > ol.breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html.g-glass .product-v2 > .breadcrumb-bar > ol.breadcrumb::-webkit-scrollbar {
        display: none;
    }

    html.g-glass .product-v2 > .breadcrumb-bar .breadcrumb-item {
        white-space: nowrap;
    }

    html.g-glass .product-v2 > .container {
        padding-top: 10px !important;
        padding-bottom: 16px !important;
    }

    html.g-glass .product-v2 .product-info > .info-block.col-lg-auto {
        padding-top: 10px !important;
    }

    html.g-glass .product-v2 .product-info > .info-block.col-lg-auto > .border {
        padding: 14px !important;
        border-radius: 22px;
    }

    html.g-glass .product-v2 .shop-btngroup .btn {
        min-height: 44px;
        height: 44px;
        margin: 4px 0;
    }

    html.g-glass .product-v2 .list-border {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    html.g-glass .product-v2 .list-title {
        font-size: 17px;
    }

    /* 手機的規格表是另外兩塊 .d-md-none 的表（不在 .product-info 裡），
       所以這裡不加 .product-info 前綴，兩邊一起套。 */
    html.g-glass .product-v2 .list-info-table > [class*="col-"] {
        padding: 0 !important;
    }

    html.g-glass .product-v2 .list-info-table .row:has(> [class*="col-"]) {
        padding: 4px 0;
        border-bottom: 1px solid var(--g-divider);
        font-size: 13px;
        line-height: 1.55;
    }

    html.g-glass .product-v2 .product-info .list-metaAuthor {
        margin: 0 !important;
        line-height: 1.6;
    }

    html.g-glass .product-v2 .product-activity-mobile {
        border: 1px solid var(--g-border) !important;
        border-radius: 16px;
        background: rgba(255, 255, 255, .5);
        box-shadow: inset 0 1px 0 var(--g-inset-line);
    }

    html.g-glass .product-v2 .product-activity-mobile .rating-stars {
        margin: 0 12px 4px !important;
    }

    html.g-glass .product-v2 .product-activity-mobile .list-border {
        margin: 0 12px !important;
        padding-top: 6px !important;
    }
}

/* ============================================================
 * 會員中心表單頁 .account-v2（短版 layout）
 * 目前只有「修改聯絡 Email」/user/email/change（views/user/change_email.jsp）掛上。
 * 結構：<main.account-content.account-v2> > .container.md-content > .col-md-8 >
 *       h4 + .text-muted + section.g-acct[data-state]（紙卡）
 *         .g-acct-row--current  目前 Email（唯讀參考 + 狀態膠囊）
 *         form.g-acct-row--new  新 Email 欄位 + 送出鈕 + 送出後的等待驗證區
 * 鐵律：這一整塊是內容層 → 紙卡（細線＋陰影），不套玻璃；玻璃只在 header dock。
 * 狀態靠 section 的 data-state 切：verified / pending / changed，
 * 子元素用 data-show="<state>" 宣告自己只在哪個狀態出現、data-hide 反之，
 * JS（retail.user.restUserEmail）只改 data-state，不碰 display。
 * ============================================================ */
html.g-glass .account-v2 h4 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--g-ink);
}

html.g-glass .account-v2 > .container > div > .text-muted {
    font-size: 14px;
    line-height: 1.6;
    color: var(--g-muted) !important;
}

html.g-glass .account-v2 .g-acct {
    position: relative;
    margin-top: 22px;
    padding: 6px 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 0 0 1px rgba(88, 101, 114, .12),
        0 10px 30px rgba(45, 55, 64, .05),
        0 2px 6px rgba(45, 55, 64, .08);
}

/* 狀態開關 */
html.g-glass .account-v2 .g-acct [data-show] {
    display: none;
}

html.g-glass .account-v2 .g-acct[data-state="verified"] [data-show="verified"],
html.g-glass .account-v2 .g-acct[data-state="pending"] [data-show="pending"],
html.g-glass .account-v2 .g-acct[data-state="changed"] [data-show="changed"] {
    display: inline-flex;
}

html.g-glass .account-v2 .g-acct[data-state="pending"] .g-acct-note[data-show="pending"],
html.g-glass .account-v2 .g-acct[data-state="changed"] .g-acct-sent[data-show="changed"] {
    display: flex;
}

html.g-glass .account-v2 .g-acct[data-state="changed"] [data-hide="changed"] {
    display: none;
}

/* ---- 每一列 ---- */
html.g-glass .account-v2 .g-acct-row {
    display: block;
    margin: 0;
    padding: 20px 0;
}

html.g-glass .account-v2 .g-acct-row--current {
    border-bottom: 1px solid var(--g-divider);
}

html.g-glass .account-v2 .g-acct-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--g-muted);
}

html.g-glass .account-v2 .g-acct-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-height: 44px;
}

html.g-glass .account-v2 .g-acct-value {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--g-ink);
    overflow-wrap: anywhere;
    transition: color var(--g-dur-state) ease, opacity var(--g-dur-state) ease;
}

/* 送出新 Email 之後：舊的劃掉、退成灰 */
html.g-glass .account-v2 .g-acct[data-state="changed"] .g-acct-row--current .g-acct-value {
    color: var(--g-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(95, 107, 120, .55);
    text-decoration-thickness: 1.5px;
    opacity: .8;
}

html.g-glass .account-v2 .g-acct-note {
    display: none;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--g-muted);
}

/* ---- 狀態膠囊 ---- */
html.g-glass .account-v2 .g-acct-badge {
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: var(--g-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

html.g-glass .account-v2 .g-acct-badge--ok {
    color: #1a7f55;
    background: rgba(31, 143, 95, .12);
}

html.g-glass .account-v2 .g-acct-badge--wait {
    color: var(--g-accent-ink);
    background: var(--g-accent-soft);
}

html.g-glass .account-v2 .g-acct-badge--off {
    color: var(--g-muted);
    background: rgba(88, 101, 114, .1);
}

/* 轉圈：膠囊與送出鈕共用，顏色跟著 currentColor */
html.g-glass .account-v2 .g-acct-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .9;
    animation: g-acct-spin .8s linear infinite;
}

@keyframes g-acct-spin {
    to { transform: rotate(360deg); }
}

/* ---- 新 Email 欄位 ---- */
html.g-glass .account-v2 .g-acct-field .g-acct-input {
    flex: 1 1 260px;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(88, 101, 114, .22);
    border-radius: 13px;
    background: rgba(255, 255, 255, .85);
    font-size: 15px;
    color: var(--g-ink);
    box-shadow: inset 0 1px 2px rgba(45, 55, 64, .04);
    transition: border-color var(--g-dur-micro) ease, box-shadow var(--g-dur-micro) ease,
        background var(--g-dur-state) ease, color var(--g-dur-state) ease;
}

html.g-glass .account-v2 .g-acct-input::placeholder {
    color: rgba(95, 107, 120, .6);
}

html.g-glass .account-v2 .g-acct-field .g-acct-input:focus {
    outline: 0;
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px var(--g-accent-ring);
    background: #fff;
}

html.g-glass .account-v2 .g-acct-field .g-acct-input.is-invalid {
    border-color: #d9463e;
    background-image: none;
    padding-right: 14px;
}

html.g-glass .account-v2 .g-acct-field .g-acct-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 70, 62, .22);
}

/* 送出後鎖住：灰底、不可編輯，前面帶一把鎖 */
html.g-glass .account-v2 .g-acct-field .g-acct-input[readonly] {
    padding-left: 38px;
    border-color: rgba(88, 101, 114, .14);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6b78' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zm-7-2a2 2 0 1 1 4 0v2h-4V6z'/%3E%3C/svg%3E") 12px center / 18px 18px no-repeat,
        rgba(88, 101, 114, .07);
    color: var(--g-ink);
    font-weight: 500;
    box-shadow: none;
    cursor: default;
}

html.g-glass .account-v2 .g-acct-field .g-acct-input[readonly]:focus {
    border-color: rgba(88, 101, 114, .2);
    box-shadow: none;
}

/* 錯誤訊息：不是 input 的兄弟，不能靠 Bootstrap 的 .is-invalid ~ .invalid-feedback */
html.g-glass .account-v2 .g-acct-error {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    color: #d9463e;
}

html.g-glass .account-v2 .g-acct-error:not(:empty) {
    display: block;
}

/* ---- 送出鈕與送出後的等待驗證區 ---- */
html.g-glass .account-v2 .g-acct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 16px;
}

html.g-glass .account-v2 .g-acct-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 44px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    border-radius: var(--g-radius-btn);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--g-accent), var(--g-accent-strong));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px rgba(239, 77, 0, .22);
    transition: transform var(--g-dur-micro) var(--g-ease-out), box-shadow var(--g-dur-micro) ease,
        opacity var(--g-dur-micro) ease;
}

html.g-glass .account-v2 .g-acct-submit:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px rgba(239, 77, 0, .28);
}

html.g-glass .account-v2 .g-acct-submit:active {
    transform: translateY(0) scale(.985);
}

html.g-glass .account-v2 .g-acct-submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--g-accent-ring);
}

html.g-glass .account-v2 .g-acct-submit:disabled {
    opacity: .7;
    transform: none;
    cursor: progress;
}

html.g-glass .account-v2 .g-acct-submit-busy {
    display: none;
    align-items: center;
    gap: 8px;
}

html.g-glass .account-v2 .is-busy .g-acct-submit-txt {
    display: none;
}

html.g-glass .account-v2 .is-busy .g-acct-submit-busy {
    display: inline-flex;
}

html.g-glass .account-v2 .g-acct-sent {
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--g-accent-soft);
    font-size: 14px;
    line-height: 1.55;
    color: var(--g-ink);
    animation: g-acct-in var(--g-dur-enter) var(--g-ease-spring) both;
}

@keyframes g-acct-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

html.g-glass .account-v2 .g-acct-sent-txt {
    overflow-wrap: anywhere;
}

html.g-glass .account-v2 .g-acct-sent-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

/* 文字鈕：重發驗證信／改用其他 Email */
html.g-glass .account-v2 .g-acct-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(200, 65, 0, .4);
    cursor: pointer;
    transition: color var(--g-dur-micro) ease, text-decoration-color var(--g-dur-micro) ease;
}

html.g-glass .account-v2 .g-acct-link:hover {
    color: var(--g-accent-strong);
    text-decoration-color: currentColor;
}

html.g-glass .account-v2 .g-acct-link:disabled {
    opacity: .5;
    cursor: progress;
}

/* 一次性提示（驗證信已重新寄出／送出失敗）：留在卡片裡，不用 fixed */
html.g-glass .account-v2 .g-acct-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 12px;
    padding: 7px 14px;
    border-radius: var(--g-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: #1a7f55;
    background: rgba(31, 143, 95, .12);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--g-dur-state) ease, transform var(--g-dur-state) var(--g-ease-out);
}

html.g-glass .account-v2 .g-acct-toast:empty {
    display: none;
}

html.g-glass .account-v2 .g-acct-toast.is-on {
    opacity: 1;
    transform: none;
}

html.g-glass .account-v2 .g-acct-toast[data-kind="err"] {
    color: #b3261e;
    background: rgba(217, 70, 62, .12);
}

@media (max-width: 767.98px) {
    html.g-glass .account-v2 .g-acct {
        margin-top: 18px;
        padding: 2px 16px;
        border-radius: 16px;
    }

    html.g-glass .account-v2 .g-acct-row {
        padding: 16px 0;
    }

    html.g-glass .account-v2 .g-acct-field .g-acct-input {
        flex-basis: 100%;
    }

    html.g-glass .account-v2 .g-acct-submit {
        width: 100%;
    }

    html.g-glass .account-v2 .g-acct-sent {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-mega,
    .g-dd,
    .g-group,
    .g-flat .g-chip,
    .g-pubook-card,
    .g-show-skel span,
    .g-hot-aura img,
    .g-hot-cov,
    .g-hot-cov-body,
    .g-hot-rank,
    .g-hot-sheen,
    .g-hot-caption,
    .g-hot-board,
    .g-ch-card,
    .g-ch-aura,
    .g-ch-fan img,
    .g-np-card,
    .g-np-date,
    .g-md-tile,
    .g-md-disc i,
    html.g-glass .account-v2 .g-acct-spin,
    html.g-glass .account-v2 .g-acct-sent {
        animation: none !important;
    }

    header.nav-desktop,
    header.nav-desktop .btn--transparent,
    header.nav-desktop .icon-txt,
    header.nav-desktop #search-bar,
    .g-chip,
    .g-dd-item,
    .g-rail-ind,
    .g-rail-item,
    .g-pubook-card,
    .nav-bottom-mobile .g-bd-ind,
    html.g-glass #gotop,
    html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card,
    html.g-glass .pubu-old-style.giftcard_checkout #center .normal_card .btn-buy,
    html.g-glass .pubu-old-style.giftcard_checkout .orangeLine_btn,
    html.g-glass .product-v2 .product-info .cover-block .cover img,
    html.g-glass .product-v2 .product-info .cover-block .icon-display.zoom_in,
    html.g-glass .product-v2 .product-info .btn.btn--outline-primarySec,
    html.g-glass .product-v2 .product-info .btn--hl,
    html.g-glass .product-v2 .product-class,
    html.g-glass .product-v2 .shop-btngroup .btn,
    html.g-glass .product-v2 .collapse-btnblock .btn,
    html.g-glass .product-v2 .pubuUI-js-btn-listmore,
    html.g-glass .product-v2 .cover-list-level .info-slide,
    html.g-glass .product-v2 .list-video-table > [class*="col-"],
    html.g-glass .product-v2 .list-video-table .btn-video {
        transition: none !important;
    }
}

/* ============================================================
 * 影音播放器 .player-v2（/media/{id}/player，views/product/media/player.jsp）
 * 「正在播放」畫面：封面模糊放大當環境光（.g-player-ambient）＋壓暗 scrim；
 * 中央舞台 .g-player-stage 放相框 .g-player-art（影片或有聲書封面，尺寸由
 * glassPlayer.sizeArt 依比例算到最大）與標題 .g-player-meta；
 * 底部一顆置中的深色玻璃 dock .g-player-dock：上排進度（時間｜軌道｜總長），
 * 下排 1fr auto 1fr 三組（速度＋音量｜上一集 倒轉 播放 快轉 下一集｜子母畫面 全螢幕）。
 * Video.js 只當引擎（controls:false），控制項全是 JSP 自己的 markup，狀態由
 * js/pu/modules/glassPlayer.js 切 root 的 class：
 *   is-audio / is-video、is-loading、is-playing / is-paused、has-started、is-waiting、
 *   is-blocked（自動播放被擋）、is-idle（影片播放中閒置收起 chrome）、is-scrubbing、
 *   is-muted / is-quiet、is-rate-custom、is-fullscreen、is-ended、is-error。
 * 鐵律：玻璃只在 dock 與關閉鈕；相框是內容層，只有陰影＋細線。
 * 這一頁的玻璃是深色的（全站其他玻璃都是白的），token 就地定義在 .player-v2 上。
 * pubu.ui 的 .graphics-view 給了 fixed 滿版與 z-index:1001，這裡只蓋掉背景。
 * 類名不可含 btn-- / icon--（pubu.ui 的屬性選擇器會誤中）。
 * ============================================================ */
.player-v2 {
    --p-top: calc(var(--g-dock-inset) * 2 + var(--g-dock-height));
    --p-gutter: 24px;
    --p-dock-bottom: 24px;
    --p-dock-h: 128px;
    --p-glass: rgba(18, 22, 28, .58);
    --p-glass-border: rgba(255, 255, 255, .14);
    --p-glass-line: rgba(255, 255, 255, .22);
    --p-control: rgba(255, 255, 255, .08);
    --p-control-hover: rgba(255, 255, 255, .16);
    --p-control-active: rgba(255, 255, 255, .26);
    --p-ink: #f4f6f8;
    --p-muted: rgba(244, 246, 248, .62);
    --p-track: rgba(255, 255, 255, .18);
    --p-buffered: rgba(255, 255, 255, .3);
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    background: #0f1318;
    color: var(--p-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- 環境光：封面模糊放大慢速漂移，scrim 壓暗讓白字與玻璃站得住 ---- */
.player-v2 .g-player-ambient {
    position: absolute;
    inset: -12%;
    background-position: center;
    background-size: cover;
    filter: blur(64px) saturate(1.5) brightness(.62);
    transform: scale(1.08);
    animation: g-player-drift 48s ease-in-out infinite alternate;
    will-change: transform;
}

.player-v2 .g-player-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(180deg, rgba(8, 10, 14, .38) 0%, rgba(8, 10, 14, .22) 45%, rgba(8, 10, 14, .72) 100%);
}

@keyframes g-player-drift {
    from { transform: scale(1.08) translate3d(-2%, -1%, 0); }
    to { transform: scale(1.16) translate3d(2%, 2%, 0); }
}

/* ---- 關閉鈕：與頂部 header dock 同一條水平線 ---- */
.player-v2 .g-player-close {
    position: absolute;
    top: calc(var(--g-dock-inset) + (var(--g-dock-height) - 44px) / 2);
    left: 20px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--p-glass-border);
    border-radius: 50%;
    background: var(--p-glass);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.6);
    backdrop-filter: blur(var(--g-blur)) saturate(1.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 var(--p-glass-line);
    color: var(--p-ink);
    cursor: pointer;
    transition: background var(--g-dur-micro), transform var(--g-dur-state) var(--g-ease-spring), opacity var(--g-dur-state);
}

.player-v2 .g-player-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.player-v2 .g-player-close:hover {
    background: rgba(40, 46, 54, .7);
    transform: scale(1.06);
}

.player-v2 .g-player-close:active {
    transform: scale(.94);
}

/* ---- 舞台：頂部讓開 header dock，底部讓開播放 dock ---- */
.player-v2 .g-player-stage {
    position: absolute;
    top: var(--p-top);
    right: var(--p-gutter);
    bottom: calc(var(--p-dock-h) + var(--p-dock-bottom) + 18px);
    left: var(--p-gutter);
    display: flex;
    align-items: stretch;
}

.player-v2 .g-player-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-width: 0;
    min-height: 0;
}

.player-v2 .g-player-art {
    position: relative;
    width: min(56vh, 80vw);
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    cursor: pointer;
    transform-origin: 50% 60%;
    transition: transform var(--g-dur-move) var(--g-ease-spring), box-shadow var(--g-dur-move);
    animation: g-player-in var(--g-dur-enter) var(--g-ease-spring) backwards;
}

.player-v2.is-video .g-player-art {
    width: min(88vw, calc((100vh - var(--p-top) - var(--p-dock-h) - 150px) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 18px;
}

/* 有聲書：暫停時封面縮一點，播放時呼吸發光（Apple Music 那種） */
.player-v2.is-audio.is-paused.has-started .g-player-art {
    transform: scale(.94);
}

.player-v2.is-audio.is-playing .g-player-art {
    animation: g-player-breathe 6s ease-in-out infinite;
}

@keyframes g-player-breathe {
    0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px rgba(255, 255, 255, .05); }
    50% { box-shadow: 0 34px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 90px rgba(255, 255, 255, .12); }
}

.player-v2 .g-player-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-v2 .g-player-video,
.player-v2 .g-player-video.video-js {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: #000;
    font-size: 10px;
}

/* 有聲書：<video> 只負責出聲，藏到 1px（display:none 有些瀏覽器會停播） */
.player-v2.is-audio .g-player-video,
.player-v2.is-audio .g-player-video.video-js {
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.player-v2 .video-js .vjs-tech {
    object-fit: contain;
}

.player-v2 .video-js .vjs-poster {
    background-size: cover;
}

.player-v2 .video-js .vjs-loading-spinner,
.player-v2 .video-js .vjs-big-play-button,
.player-v2 .video-js .vjs-control-bar,
.player-v2 .video-js .vjs-error-display {
    display: none !important;
}

/* 自製轉圈：載入中與緩衝中 */
.player-v2 .g-player-spinner {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--g-dur-micro);
}

.player-v2:is(.is-loading, .is-waiting):not(.is-error, .is-blocked) .g-player-spinner {
    opacity: 1;
    animation: g-player-spin .9s linear infinite;
}

@keyframes g-player-spin {
    to { transform: rotate(360deg); }
}

/* 大播放鍵：只在還沒開始／被擋自動播放／播完時露出 */
.player-v2 .g-player-bigplay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    color: var(--g-accent);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(.7);
    transition: opacity var(--g-dur-state), transform var(--g-dur-state) var(--g-ease-spring);
}

.player-v2 .g-player-bigplay svg {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    fill: currentColor;
}

.player-v2:is(.is-blocked, .is-ended) .g-player-bigplay,
.player-v2.is-paused:not(.has-started, .is-loading, .is-error) .g-player-bigplay {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.player-v2 .g-player-bigplay:hover {
    transform: scale(1.06);
}

.player-v2 .g-player-error {
    position: absolute;
    inset: auto 16px 16px;
    z-index: 3;
    display: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(18, 22, 28, .8);
    color: var(--p-ink);
    font-size: 13px;
    text-align: center;
}

.player-v2.is-error .g-player-error {
    display: block;
}

/* ---- 標題 ---- */
.player-v2 .g-player-meta {
    max-width: min(720px, 100%);
    text-align: center;
    animation: g-player-up var(--g-dur-enter) var(--g-ease-out) .08s backwards;
    transition: opacity var(--g-dur-state);
}

.player-v2 .g-player-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--p-muted);
    font-size: 12px;
    letter-spacing: .08em;
}

.player-v2 .g-player-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.player-v2 .g-player-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--p-ink);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.player-v2 .g-player-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin: 6px 0 0;
    color: var(--p-muted);
    font-size: 14px;
}

.player-v2 .g-player-sub span + span::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 10px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    opacity: .7;
}

/* 播放中的等化器小條 */
.player-v2 .g-player-eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.player-v2 .g-player-eq i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--g-accent);
    transform-origin: bottom;
    animation: g-player-eq 1s ease-in-out infinite;
}

.player-v2 .g-player-eq i:nth-child(2) { animation-delay: -.3s; }
.player-v2 .g-player-eq i:nth-child(3) { animation-delay: -.6s; }
.player-v2 .g-player-eq i:nth-child(4) { animation-delay: -.15s; }

.player-v2.is-playing .g-player-eyebrow .g-player-eq,
.player-v2.is-playing .g-player-episodes .is-current .g-player-eq {
    display: inline-flex;
}

@keyframes g-player-eq {
    0%, 100% { transform: scaleY(.25); }
    50% { transform: scaleY(1); }
}

/* ---- 播放 dock：深色玻璃 ---- */
.player-v2 .g-player-dock {
    position: absolute;
    right: var(--p-gutter);
    bottom: max(var(--p-dock-bottom), calc(env(safe-area-inset-bottom, 0px) + 12px));
    left: var(--p-gutter);
    z-index: 4;
    /* 寬度交給 left/right 算，再用 max-width 夾住並 auto margin 置中；
       不能寫 width:100%（那是 root 的寬，手機會超出右邊） */
    width: auto;
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 22px 14px;
    border: 1px solid var(--p-glass-border);
    border-radius: var(--g-radius-panel);
    background: var(--p-glass);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.6);
    backdrop-filter: blur(var(--g-blur)) saturate(1.6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 var(--p-glass-line);
    animation: g-player-up var(--g-dur-enter) var(--g-ease-out) .14s backwards;
    transition: opacity var(--g-dur-state), transform var(--g-dur-move) var(--g-ease-out);
}

@keyframes g-player-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: none; }
}

@keyframes g-player-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* 進度列 */
.player-v2 .g-player-seek {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
}

.player-v2 .g-player-time {
    color: var(--p-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.player-v2 .g-player-time-total {
    text-align: right;
}

.player-v2 .g-player-track {
    position: relative;
    height: 26px;
    cursor: pointer;
    outline: none;
    touch-action: none;
}

.player-v2 .g-player-track::before,
.player-v2 .g-player-buffered,
.player-v2 .g-player-played {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    transition: height .15s, margin-top .15s;
}

.player-v2 .g-player-track::before {
    right: 0;
    background: var(--p-track);
}

.player-v2 .g-player-buffered {
    width: 0;
    background: var(--p-buffered);
    transition: width .3s linear, height .15s, margin-top .15s;
}

.player-v2 .g-player-played {
    width: 0;
    background: linear-gradient(90deg, #ffa24d, var(--g-accent));
    box-shadow: 0 0 12px rgba(255, 107, 26, .45);
    transition: width .25s linear, height .15s, margin-top .15s;
}

.player-v2.is-scrubbing .g-player-played {
    transition: none;
}

.player-v2 .g-player-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    pointer-events: none;
    transform: scale(0);
    transition: transform var(--g-dur-micro) var(--g-ease-spring), left .25s linear;
}

.player-v2.is-scrubbing .g-player-thumb {
    transition: transform var(--g-dur-micro) var(--g-ease-spring);
}

.player-v2 .g-player-track:is(:hover, .is-hover, :focus-visible) .g-player-thumb,
.player-v2.is-scrubbing .g-player-thumb {
    transform: scale(1);
}

.player-v2 .g-player-track:is(:hover, .is-hover)::before,
.player-v2 .g-player-track:is(:hover, .is-hover) :is(.g-player-buffered, .g-player-played),
.player-v2.is-scrubbing .g-player-track::before,
.player-v2.is-scrubbing :is(.g-player-buffered, .g-player-played) {
    height: 6px;
    margin-top: -3px;
}

.player-v2 .g-player-tip {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    color: #1c232b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 2px) scale(.9);
    transition: opacity .15s, transform .15s var(--g-ease-spring);
}

.player-v2 .g-player-track.is-hover .g-player-tip,
.player-v2.is-scrubbing .g-player-tip {
    opacity: 1;
    transform: translate(-50%, -2px) scale(1);
}

/* 控制列：三組，中間那組永遠置中 */
.player-v2 .g-player-transport {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 2px;
}

.player-v2 .g-player-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-v2 .g-player-group-center {
    justify-content: center;
    gap: 10px;
}

.player-v2 .g-player-group-right {
    justify-content: flex-end;
}

.player-v2 .g-player-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--p-ink);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--g-dur-micro), transform var(--g-dur-micro) var(--g-ease-spring), opacity var(--g-dur-micro);
}

.player-v2 .g-player-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.player-v2 .g-player-btn:hover {
    background: var(--p-control-hover);
    color: var(--p-ink);
}

.player-v2 .g-player-btn:active {
    background: var(--p-control-active);
    transform: scale(.92);
}

.player-v2 .g-player-btn.is-disabled {
    opacity: .28;
    pointer-events: none;
}

.player-v2 .g-player-jump {
    width: 44px;
    height: 44px;
}

.player-v2 .g-player-jump svg {
    width: 26px;
    height: 26px;
}

.player-v2 .g-player-jump text {
    fill: currentColor;
}

/* 播放鍵：白圓底＋橘色圖示（沿用唱片行 .g-md-play 的語彙） */
.player-v2 .g-player-play {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    color: var(--g-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--g-dur-micro) var(--g-ease-spring), box-shadow var(--g-dur-state);
}

.player-v2 .g-player-play svg {
    grid-area: 1 / 1;
    width: 30px;
    height: 30px;
    fill: currentColor;
    transition: opacity .18s, transform .28s var(--g-ease-spring);
}

.player-v2 .g-player-play:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 0 6px rgba(255, 255, 255, .12);
    transform: scale(1.06);
}

.player-v2 .g-player-play:active {
    transform: scale(.94);
}

.player-v2 .g-player-icon-play {
    margin-left: 3px;
}

.player-v2 .g-player-icon-pause {
    opacity: 0;
    transform: scale(.6) rotate(-45deg);
}

.player-v2.is-playing .g-player-icon-play {
    opacity: 0;
    transform: scale(.6) rotate(45deg);
}

.player-v2.is-playing .g-player-icon-pause {
    opacity: 1;
    transform: none;
}

/* 速度：膠囊，非 1× 時亮橘 */
.player-v2 .g-player-rate {
    width: auto;
    min-width: 48px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--g-radius-pill);
    background: var(--p-control);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.player-v2.is-rate-custom .g-player-rate {
    background: var(--g-accent);
    color: #fff;
}

.player-v2.is-rate-custom .g-player-rate:hover {
    background: var(--g-accent-strong);
}

/* 音量：滑過喇叭才滑出拉桿 */
.player-v2 .g-player-volume {
    display: flex;
    align-items: center;
}

.player-v2 .g-player-vol-wave1,
.player-v2 .g-player-vol-wave2,
.player-v2 .g-player-vol-off {
    transition: opacity var(--g-dur-micro);
}

.player-v2 .g-player-vol-off { opacity: 0; }
.player-v2.is-quiet .g-player-vol-wave2 { opacity: 0; }
.player-v2.is-muted :is(.g-player-vol-wave1, .g-player-vol-wave2) { opacity: 0; }
.player-v2.is-muted .g-player-vol-off { opacity: 1; }

.player-v2 .g-player-volume-slider {
    width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width var(--g-dur-state) var(--g-ease-out), opacity var(--g-dur-state), margin var(--g-dur-state);
}

.player-v2 .g-player-volume:hover .g-player-volume-slider,
.player-v2 .g-player-volume:focus-within .g-player-volume-slider {
    width: 88px;
    margin-left: 2px;
    opacity: 1;
}

.player-v2 .g-player-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #fff var(--v, 100%), var(--p-track) var(--v, 100%));
}

.player-v2 .g-player-volume-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    -webkit-appearance: none;
    appearance: none;
}

.player-v2 .g-player-volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--p-track);
}

.player-v2 .g-player-volume-slider::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #fff;
}

.player-v2 .g-player-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

/* 全螢幕切換的兩個圖示 */
.player-v2 .g-player-icon-fs-exit { display: none; }
.player-v2.is-fullscreen .g-player-icon-fs { display: none; }
.player-v2.is-fullscreen .g-player-icon-fs-exit { display: block; }

/* ---- 影片播放中閒置：chrome 淡出、游標藏起來 ---- */
.player-v2.is-idle {
    cursor: none;
}

.player-v2.is-idle :is(.g-player-dock, .g-player-meta, .g-player-close, .g-player-panel) {
    opacity: 0;
    pointer-events: none;
}

.player-v2.is-idle .g-player-dock {
    transform: translateY(12px);
}

/* ---- 全螢幕：header dock 在 root 外面不會進來，頂部只留一點邊 ---- */
.player-v2:fullscreen,
.player-v2:-webkit-full-screen {
    --p-top: 28px;
}

.player-v2:fullscreen .g-player-close,
.player-v2:-webkit-full-screen .g-player-close {
    top: 20px;
}

/* ---- 鍵盤焦點環（規範 9.2）---- */
.player-v2 :is(.g-player-btn, .g-player-play, .g-player-close, .g-player-bigplay, .g-player-track):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---- 手機 ---- */
@supports (height: 100dvh) {
    .player-v2 {
        height: 100dvh;
    }
}

@media (max-width: 767px) {
    .player-v2 {
        --p-gutter: 14px;
        --p-dock-bottom: 14px;
        --p-dock-h: 118px;
    }

    .player-v2 .g-player-close {
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .player-v2 .g-player-main {
        gap: 16px;
    }

    .player-v2 .g-player-art {
        border-radius: 18px;
    }

    .player-v2 .g-player-title {
        font-size: 18px;
    }

    .player-v2 .g-player-sub {
        font-size: 13px;
    }

    .player-v2 .g-player-dock {
        padding: 8px 14px 12px;
        border-radius: 24px;
    }

    .player-v2 .g-player-seek {
        grid-template-columns: 40px 1fr 40px;
        gap: 6px;
    }

    .player-v2 .g-player-group-center {
        gap: 4px;
    }

    .player-v2 .g-player-skip {
        width: 36px;
        height: 36px;
    }

    .player-v2 .g-player-jump {
        width: 40px;
        height: 40px;
    }

    .player-v2 .g-player-play {
        width: 54px;
        height: 54px;
        margin: 0 4px;
    }

    /* 手機音量由硬體鍵控制，拉桿與靜音都收掉 */
    .player-v2 .g-player-volume {
        display: none;
    }

    .player-v2 .g-player-rate {
        min-width: 44px;
        height: 30px;
        padding: 0 8px;
    }
}

@media (max-width: 479px) {
    .player-v2 .g-player-pip {
        display: none;
    }
}

/* 橫向手機：上下都很擠，標題縮小、dock 貼底 */
@media (max-height: 520px) {
    .player-v2 {
        --p-dock-bottom: 10px;
        --p-dock-h: 104px;
    }

    .player-v2 .g-player-main {
        gap: 8px;
    }

    .player-v2 .g-player-eyebrow,
    .player-v2 .g-player-sub {
        display: none;
    }

    .player-v2 .g-player-title {
        font-size: 15px;
        -webkit-line-clamp: 1;
    }

    .player-v2 .g-player-dock {
        padding: 4px 16px 8px;
    }
}

/* ---- 資訊面板：商品資料（副標、作者／出版社／分類／長度、簡介、關鍵字、專輯集數、章節）----
   <1200：dock 的資訊鈕拉起的底頁（fixed，scrim 蓋住舞台與 dock）；
   ≥1200：舞台右欄 380px 的深色卡片（預設開，資訊鈕可收），相框依左欄重新算尺寸。 */
.player-v2 .g-player-panel-scrim {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--g-dur-state);
}

.player-v2 .g-player-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--p-glass-border);
    border-radius: 28px 28px 0 0;
    background: rgba(18, 22, 28, .88);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.4);
    backdrop-filter: blur(var(--g-blur)) saturate(1.4);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
    transform: translateY(105%);
    transition: transform var(--g-dur-move) var(--g-ease-spring), opacity var(--g-dur-state);
}

@supports (max-height: 78dvh) {
    .player-v2 .g-player-panel {
        max-height: 78dvh;
    }
}

.player-v2.is-panel-open .g-player-panel-scrim {
    opacity: 1;
    pointer-events: auto;
}

.player-v2.is-panel-open .g-player-panel {
    transform: none;
}

.player-v2 .g-player-panel-handle {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 10px auto 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
}

.player-v2 .g-player-panel-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--p-control);
    color: var(--p-ink);
    cursor: pointer;
}

.player-v2 .g-player-panel-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.player-v2 .g-player-panel-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 20px 24px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.player-v2 .g-player-panel-subtitle {
    margin: 4px 0 14px;
    color: var(--p-muted);
    font-size: 14px;
    line-height: 1.5;
}

.player-v2 .g-player-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.player-v2 .g-player-facts div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.player-v2 .g-player-facts dt {
    margin: 0 0 2px;
    color: var(--p-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
}

.player-v2 .g-player-facts dd {
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-v2 .g-player-panel-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 10px;
    color: var(--p-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
}

.player-v2 .g-player-panel-count {
    padding: 1px 7px;
    border-radius: var(--g-radius-pill);
    background: rgba(255, 255, 255, .1);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.player-v2 .g-player-desc-body {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(244, 246, 248, .86);
    font-size: 14px;
    line-height: 1.75;
    word-break: break-word;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.player-v2 .g-player-desc.is-expanded .g-player-desc-body {
    display: block;
    -webkit-line-clamp: none;
}

.player-v2 .g-player-desc-more {
    display: none;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--g-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.player-v2 .g-player-desc.has-more .g-player-desc-more,
.player-v2 .g-player-desc.is-expanded .g-player-desc-more {
    display: inline-block;
}

.player-v2 .g-player-desc-more-close,
.player-v2 .g-player-desc.is-expanded .g-player-desc-more-open {
    display: none;
}

.player-v2 .g-player-desc.is-expanded .g-player-desc-more-close {
    display: inline;
}

.player-v2 .g-player-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.player-v2 .g-player-tags li {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--g-radius-pill);
    background: rgba(255, 255, 255, .06);
    color: var(--p-muted);
    font-size: 12px;
}

.player-v2 :is(.g-player-episodes, .g-player-chapters) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-v2 :is(.g-player-episodes, .g-player-chapters) li + li {
    margin-top: 2px;
}

.player-v2 .g-player-episodes a,
.player-v2 .g-player-chapters button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--p-ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--g-dur-micro);
}

.player-v2 .g-player-episodes a:hover,
.player-v2 .g-player-chapters button:hover {
    background: var(--p-control-hover);
    color: var(--p-ink);
}

.player-v2 .g-player-ep-no {
    grid-area: 1 / 1;
    color: var(--p-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.player-v2 .g-player-episodes .g-player-eq {
    grid-area: 1 / 1;
    justify-self: center;
}

.player-v2 .g-player-ep-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-v2 .g-player-ep-time {
    color: var(--p-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.player-v2 .g-player-episodes .is-current a {
    background: rgba(255, 107, 26, .16);
    color: #fff;
}

.player-v2.is-playing .g-player-episodes .is-current .g-player-ep-no {
    visibility: hidden;
}

/* 桌機：面板進舞台右欄 */
@media (min-width: 1200px) {
    .player-v2 .g-player-stage {
        gap: 36px;
    }

    .player-v2 .g-player-panel-scrim,
    .player-v2 .g-player-panel-handle,
    .player-v2 .g-player-panel-close {
        display: none;
    }

    .player-v2 .g-player-panel {
        position: relative;
        inset: auto;
        z-index: auto;
        display: none;
        flex: 0 0 380px;
        align-self: center;
        max-height: 100%;
        padding-bottom: 0;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 24px;
        background: rgba(14, 18, 24, .5);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
        transform: none;
        animation: g-player-up var(--g-dur-enter) var(--g-ease-out) .1s backwards;
    }

    .player-v2.is-panel-open .g-player-panel {
        display: flex;
    }

    .player-v2 .g-player-panel-body {
        padding: 22px 24px 20px;
    }

    .player-v2 .g-player-panel-h:first-child {
        margin-top: 0;
    }

    .player-v2.is-panel-open .g-player-info {
        background: var(--p-control-active);
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-v2 .g-player-ambient,
    .player-v2 .g-player-art,
    .player-v2 .g-player-meta,
    .player-v2 .g-player-dock,
    .player-v2 .g-player-eq i {
        animation: none !important;
    }

    .player-v2 .g-player-art,
    .player-v2 .g-player-dock,
    .player-v2 .g-player-btn,
    .player-v2 .g-player-play {
        transition: none !important;
    }
}