/* =========================================================   SITE NAVBAR - customize.css
   ================================================================ */

/* ---- 基礎變數 ---- */
:root {
    --snav-height-menu: 44px;
    --snav-total-height: 108px;
    /* 由 JS 動態更新 */
    --snav-bg: transparent;
    --snav-bg-scrolled: #ffffff;
    --snav-color: #1a1a1a;
    --snav-color-hover: #555;
    --snav-border: rgba(0, 0, 0, 0.08);
    --snav-font-size: 13px;
    --snav-letter-spacing: 0.1em;
    --snav-transition: 0.3s ease;
    --mega-image-ratio: calc(7 / 5);
    /* 5:7 寬高比 → height = width * 7/5 */
    --font-special: "Playfair Display", "Noto Serif TC", "Songti TC", Georgia, serif;
    --light-gray-color: #f7f7f7;
    --font-size-2xl: 1.75rem;

}

#share-btn {
    color: #fff;
    display: none;
}

.title {
    font-weight: 600;
}

.title>span:first-child {
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: #1a1a1a;
    margin: 0 0 40px;
    font-family: var(--font-base);
}

.title>span:nth-child(2) {
    font-family: var(--font-base);
    font-size: 15px;
    border-top: 0.5px solid #000;
}

aside .article-group .group-title {
    font-size: var(--font-size-base);
}

.course-hero .breadcrumb {
    margin-bottom: 0;
}

.blog-info .title,
.course-display>h1 {
    font-size: var(--font-size-2xl);
    font-family: var(--font-special);
    padding-bottom: 20px;
    font-weight: 500;
}

.course-hero h1.h2 {
    font-size: var(--font-size-2xl);
    font-family: var(--font-special);
    font-weight: 500 !important;
    letter-spacing: 1.5px;
}

.course-aside-content .course-title-group>h2 {
    font-size: var(--font-size-md) !important;
}

.blog-info .article-img {
    text-align: center;
}

.event-block {
    background-color: transparent;
    padding: 0;
}

.course-block {
    border: 0px;
    padding: 0;
}

.html-info :where(h1) {
    font-size: var(--font-size-2xl);
    font-family: var(--font-special);
}

.html-info :where(h1, h2, h3, h4, h5, h6) {
    letter-spacing: 1.5px;
    color: #000;
    font-weight: 600;
}

.html-info :where(h2) {
    font-size: var(--font-size-xl);
    font-family: var(--font-special);
}

.html-info :where(h3) {
    font-size: var(--font-size-lg);
}

.html-info :where(h4) {
    font-size: var(--font-size-md);
}

.html-info :where(h5) {
    font-size: var(--font-size-base);
}

.html-info :where(h6) {
    font-size: var(--font-size-sm);
}

.blog-info .subTitle {
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: #1a1a1a;
    margin: 20px 0 10px 0;
}

.pagging-title>span,
.pagging-title h1 {
    display: inline-block;
    border: 0px;
    padding: 0px;
    font-weight: 300;
}

.product-group>a .text-box>.middle-title {
    color: var(--default-color);
    font-size: var(--font-size-sm);
}

.product-group>a .text-box>p {
    font-size: var(--font-size-xs);
    font-weight: 300;
}

.product-group>a .img-box {
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.hamburger .line {
    width: 22px;
    height: 1px;
    display: block;
    margin: 5px auto;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/* 開啟時維持三條線，不變成箭頭/X */
.hamburger.model1.is-active .line:nth-child(1),
.hamburger.model1.is-active .line:nth-child(2),
.hamburger.model1.is-active .line:nth-child(3) {
    width: 22px;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.product-info {
    margin-top: 0px;
}

.blog-grid .text-box .middle-title {
    line-height: 1.5;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* ---- 主體 Navbar ---- */
.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--snav-bg);
    transition: background var(--snav-transition), box-shadow var(--snav-transition),
        transform var(--snav-transition);
}

/* Chanel 風格：滑到 footer 區域時，navbar 滑出畫面避開 footer */
.site-navbar.is-near-footer {
    transform: translateY(-100%);
}

.mobile-menu {
    transition: transform var(--snav-transition, 0.3s ease);
}

.mobile-menu.is-near-footer {
    transform: translateY(-100%);
}

/* ---- Chanel 風格 Footer：固定在視窗底部，內容向上滑會逐漸顯露 footer ---- */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    min-height: 100vh;
}

/* 主體內容加白底蓋住 footer，並在底部預留 footer 高度的空間以露出 footer */
/* padding-top 從 body 移到 .content，讓白底延伸到視窗頂端蓋住可能延伸上來的 footer */
body>.content {
    position: relative;
    z-index: 1;
    background-color: var(--page-bg, #fff);
    padding-top: var(--snav-total-height);
    margin-bottom: var(--footer-reveal-height, 0px);
    min-height: 100vh;
}

.site-navbar.is-scrolled {
    background: var(--snav-bg-scrolled);
    box-shadow: 0 1px 0 var(--snav-border);
}

/* body 不再需要 padding-top（已移至 .content） */
body {
    padding-top: 0;
}

body.is-homepage>.content,
body.course-detail-page>.content {
    padding-top: 0;
}

body.course-detail-page {
    margin-top: 0 !important;
}

@media (max-width: 992px) {
    body>.content {
        padding-top: var(--padding-mobile-nav, 67px);
    }

    body.is-homepage>.content {
        padding-top: 0;
    }
}

.signup-footer button:first-child {
    font-size: 34px;
}

.signup-footer button:last-child {
    font-size: 30px;
}

.blog-footer>ul>li a:first-child {
    font-size: 24px;
}

.blog-footer>ul>li:last-child a {
    font-size: 22px;
}

.read-more.btn.btn-border {
    font-size: 12px;
    margin-top: 10px;
}

.blog-row {
    overflow: inherit;
}

.blog-row-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.blog-row-link:hover {
    color: inherit;
    text-decoration: none;
}

.blog-row .row {
    align-items: center;
}

.blog-row .img-fluid {
    aspect-ratio: 360 / 240;
    object-fit: cover;
    width: 100%;
}

#index-blog .blog-row {
    margin: 0 auto 90px auto;
}

#index-blog .peek-more {
    padding-top: 0;
}

.blog-row .col-md-5 {
    padding-left: 30px;
    padding-right: 30px;
}

.blog-row .col-md-7 {
    padding-right: 30px;
    padding-left: 0;
}

@media (max-width: 576px) {
    #index-blog .blog-row {
        margin: 0 auto 30px auto;
    }

    .blog-row .col-md-5 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .blog-row .col-md-7 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

.article-classify,
.blog-info .article-classify>a {
    font-weight: 300;
}

.middle-title,
.course-block .middle-title a {
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    color: #000;
    font-size: var(--font-size-lg);
    font-weight: 500;
}

/* 結帳頁購買項目：補回缺失的內距與品項間距，並把標題字型改回黑體 */
.shopping-order .middle-title {
    font-family: var(--font-base);
    font-weight: 500;
}

.shopping-order .product-block {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}


/* 灰底卡片底部補留白，跟 .middle-title 的上下 padding 視覺對稱 */
.shopping-order>div:first-child {
    padding-bottom: var(--spacing-lg);
}

/* 折扣碼列：把 ✕、使用 按鈕高度拉到跟 input 一致 */
.discount-code-group .input-group-append .btn {
    min-height: calc(1.5em + 0.75rem + 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 手機版結帳按鈕貼齊灰底卡左右邊（移除 col 內 padding-x） */
@media (max-width: 767.98px) {
    .checkout-actions>[class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* 結帳頁品項金額：取消商品卡片的 column 排版，保持 row 讓左右文字對齊 */
    .shopping-order .psc-card__price {
        flex-direction: row;
        align-items: baseline;
    }
}

.remove-btn {
    background: transparent;
}

.course-block:hover,
.event-block:hover {
    box-shadow: none;
}

.event-block>.text-box {
    padding: 0;
}

.event-block>.img-box>.event-date {
    top: 0px;
}

.event-block>.img-box,
.course-block .img-box {
    aspect-ratio: 360 / 240;
    overflow: hidden;
}

.event-block>.img-box>img,
.course-block .img-box>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pagging-title {
    margin-bottom: 0px;
    font-size: var(--font-size-base);
    color: #000;
    font-family: var(--font-base);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   首頁透明導覽列（白色文字 → 滾動後白底黑字）
   ---------------------------------------------------------------- */
body.is-homepage {
    padding-top: 0;
}

body.is-homepage .site-navbar:not(.is-scrolled) {
    --snav-color: #fff;
    --snav-color-hover: rgba(255, 255, 255, 0.7);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

body.is-homepage .site-navbar:not(.is-scrolled) .site-navbar-title {
    color: #fff;
}

body.is-homepage .site-navbar:not(.is-scrolled) .site-nav-badge {
    background: #fff;
    color: #1a1a1a;
}

body.is-homepage .site-navbar:not(.is-scrolled) .site-navbar-logo img {
    filter: brightness(0) invert(1);
}

/* 首頁手機版透明導航列 */
body.is-homepage .mobile-menu:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

body.is-homepage .mobile-menu:not(.is-scrolled) .hamburger .line {
    background-color: #fff;
}

body.is-homepage .mobile-menu:not(.is-scrolled) .mobile-btn>a,
body.is-homepage .mobile-menu:not(.is-scrolled) .mobile-btn .mobile-cart-toggle {
    color: #fff;
}

body.is-homepage .mobile-menu:not(.is-scrolled) .mobile-logo img {
    filter: brightness(0) invert(1);
}

body.is-homepage .mobile-menu:not(.is-scrolled) .logo-text {
    color: #fff;
}

body.is-homepage .mobile-menu.is-scrolled {
    background: #fff;
}

.mobile-btn>a {
    margin-right: 5px;
}

.logo-img img {
    padding: 0px;
    max-height: 20px;
}

.mobile-menu {
    padding: 0;
}

.mobile-menu.left-style .hamburger {
    margin-top: 0;
}

/* ----------------------------------------------------------------
   頂部列：左(語言) / 中(Logo) / 右(Icons)
   ---------------------------------------------------------------- */
.site-navbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    position: relative;
}

/* 左側 */
.site-navbar-top-left {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Logo 絕對置中 */
.site-navbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.site-navbar-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}


.site-navbar-logo img {
    height: 25px;
    width: auto;
    display: block;
}

.site-navbar-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--snav-color);
    text-transform: uppercase;
}

/* 右側 Actions */
.site-navbar-actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.site-nav-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--snav-color);
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    transition: color var(--snav-transition);
}

.site-nav-action-btn:hover {
    color: var(--snav-color-hover);
}

.site-nav-action-btn .bi-search {
    font-size: 16px;
}

/* 覆蓋 cart-dropdown.css，統一購物車按鈕風格 */
.cart-dropdown-wrapper {
    overflow: visible;
}

.cart-dropdown-toggle {
    position: relative;
    padding: 0;
    color: var(--snav-color);
    transition: color var(--snav-transition);
}

.cart-dropdown-toggle:hover {
    background: none;
    color: var(--snav-color-hover);
}

.cart-dropdown-menu {
    z-index: 1000;
}

.cart-dropdown-item i {
    color: #333;
}

/* 會員下拉選單 */
.member-dropdown-wrapper {
    position: relative;
    overflow: visible;
}

.member-dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--snav-color);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--snav-transition);
}

.member-dropdown-toggle:hover,
.member-dropdown-wrapper:hover .member-dropdown-toggle {
    color: var(--snav-color-hover);
}

.member-dropdown-caret {
    font-size: 10px;
    transition: transform 0.2s;
}

.member-dropdown-wrapper:hover .member-dropdown-caret {
    transform: rotate(180deg);
}

.member-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: white;
    border: 1px solid #222;
    z-index: 1000;
}

.member-dropdown-wrapper:hover .member-dropdown-menu {
    display: block;
}

.member-dropdown-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    color: #333;
    text-decoration: none;
    font-size: var(--font-size-sm);
    background: white;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.member-dropdown-item:last-child {
    border-bottom: none;
}

.member-dropdown-item:hover {
    background: #000;
    color: #fff;
}

.member-dropdown-item.is-active {
    background: #f0f0f0;
    font-weight: bold;
}

/* 桌機：header 已有會員下拉，會員內頁的「會員專區選單」抽屜按鈕隱藏 */
@media (min-width: 992px) {
    .product-header--member #filterDrawerOpen {
        display: none;
    }
}

/* outline 按鈕 hover 修正 — 反白填滿（修正 style_a 預設「text 保持金色、bg 變白」造成視覺幾乎無變化） */
:root {
    --outline-button-text-hover-color: #fff;
    --outline-button-bg-hover-color: var(--outline-button-border-color);
}

/* cart-row 對齊修正：移除 .row 預設負邊距，讓灰色 bg 右側對齊下方按鈕邊緣 */
.cart-row {
    margin-left: 0;
    margin-right: 0;
}

/* border-title 改成靠左 + 底線（覆蓋 style_a 的虛線設計；移除 uppercase 和 letter-spacing 以友善中文） */
.border-title {
    border: none;
    border-bottom: 0.5px solid #000;
    padding: 0 0 0.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    text-align: left;
    color: #1a1a1a;
    font-family: var(--font-base);
}

/* 結帳區塊內容不要多 2rem 頂部 padding（讓運送/付款區與會員資訊區間距一致） */
.cart-form-group {
    padding-top: 0;
}

/* 表單限寬（會員相關表單頁專用，避免 input 在桌機被拉太寬） */
.form-narrow {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}


/* 會員紀錄表格 — 桌機格線（手機已用卡片樣式，min-width 769px 避開） */
@media (min-width: 769px) {

    .order-title,
    .order-row {
        margin-left: 0;
        margin-right: 0;
    }

    .order-title {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        font-size: var(--snav-font-size, 13px);
    }

    .order-row {
        border-bottom: 1px solid #ddd;
        /* 蓋掉 style_a/main.css 的 .order-row padding-top/bottom（避免縮窄時 align-items-center 把短內容置中、視覺像放大間距） */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 蓋掉 style_a/main.css 的 .order-row+.order-row { border-top: 1px } 避免雙線 */
    .order-row+.order-row {
        border-top: none;
    }

    .order-title>[class*="col-"],
    .order-row>[class*="col-"] {
        padding: 10px 10px;
        border-right: 1px solid #ddd;
    }

    .order-title>[class*="col-"]:first-child,
    .order-row>[class*="col-"]:first-child {
        border-left: 1px solid #ddd;
    }
}

/* 會員紀錄表格 — 手機卡片移除 row 負邊距（避免貼到邊邊） */
@media (max-width: 768px) {
    .order-row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* 手機版：覆蓋 left-style 的 float 排版，改用 flex 讓 logo 置中 */
@media all and (max-width: 992px) {
    .mobile-menu.left-style {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        overflow: inherit;
    }

    /* 公告欄獨佔一整行 */
    .mobile-menu.left-style .top-message-bar {
        grid-column: 1 / -1;
    }

    .mobile-menu.left-style .hamburger {
        float: none;
        justify-self: start;
    }

    .mobile-menu.left-style .mobile-logo {
        float: none;
        justify-self: center;
        margin-left: 0;
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .mobile-menu.left-style .mobile-btn {
        float: none;
        justify-self: end;
    }
}

.mobile-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-icon .bi-search {
    font-size: 16px;
}

.mobile-btn>*+* {
    margin-left: var(--spacing-sm);
}

.mobile-cart-dropdown {
    position: relative;
}

.mobile-cart-menu {
    z-index: 1001;
}

.site-nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    font-style: normal;
}

/* ----------------------------------------------------------------
   選單列
   ---------------------------------------------------------------- */
.site-navbar-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--snav-height-menu);
    overflow: hidden;
    max-height: var(--snav-height-menu);
    transition: max-height var(--snav-transition),
        opacity var(--snav-transition),
        border-color var(--snav-transition);
    opacity: 1;
}

/* 往下滑 → 選單收起 */
.site-navbar.menu-collapsed .site-navbar-menu {
    max-height: 0;
    opacity: 0;
    border-top-color: transparent;
}

/* 選單列內 ul */
.site-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    height: 100%;
    align-items: stretch;
}

.site-nav-list>li {
    display: flex;
    align-items: stretch;
    position: relative;
}

.site-nav-list>li>a {
    display: flex;
    align-items: center;
    padding: 0 22px;
    font-size: var(--snav-font-size);
    letter-spacing: var(--snav-letter-spacing);
    text-transform: uppercase;
    color: var(--snav-color);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--snav-transition);
    transition: color var(--snav-transition);
}

.site-nav-list>li>a:hover {
    color: var(--snav-color-hover);
}

/* Hover 替換文字：兩段文字疊在同一 grid cell，以較寬者決定寬度避免跳動 */
.snav-text {
    display: inline-block;
    position: relative;
}

.snav-text.has-hover {
    display: inline-grid;
    justify-items: start;
}

.snav-text.has-hover>.snav-text-main,
.snav-text.has-hover>.snav-text-hover {
    grid-area: 1 / 1;
    transition: opacity var(--snav-transition);
}

.snav-text.has-hover>.snav-text-hover {
    opacity: 0;
    pointer-events: none;
}

/* 桌機主選單 hover 切換 */
.site-nav-list>li:hover .snav-text.has-hover>.snav-text-main {
    opacity: 0;
}

.site-nav-list>li:hover .snav-text.has-hover>.snav-text-hover {
    opacity: 1;
}

/* Mega menu 子項目 hover 切換 */
.site-mega-menu-links a:hover .snav-text.has-hover>.snav-text-main {
    opacity: 0;
}

.site-mega-menu-links a:hover .snav-text.has-hover>.snav-text-hover {
    opacity: 1;
}

.site-nav-list>li.is-active>a {
    color: var(--snav-color-hover);
}

/* 隱藏舊版 Bootstrap dropdown arrow */
.site-nav-list>li>a::after {
    display: none !important;
}

/* 隱藏舊版 dropdown-menu（由 mega menu 替代） */
.site-nav-list .dropdown-menu {
    display: none !important;
}

/* ----------------------------------------------------------------
   Mega Menu
   ---------------------------------------------------------------- */
.site-mega-menu {
    position: fixed;
    /* relative for close button positioning handled by fixed + absolute child */
    top: var(--snav-total-height);
    left: 0;
    right: 0;
    z-index: 899;
    background: #fff;
    border-top: none;
    box-shadow: none;

    /* 隱藏狀態 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-mega-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* 選單收起時 mega menu 跟著位移 */
.site-navbar.menu-collapsed~.site-mega-menu {
    top: var(--snav-height-top);
}

/* 關閉按鈕 */
.site-mega-menu-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 2;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #1a1a1a;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    font-weight: 300;
}

.site-mega-menu-close:hover {
    color: #888;
}

.site-mega-menu-inner {
    display: flex;
    min-height: 300px;
    max-height: 70vh;
    padding: 2rem;
    gap: 2rem;
}

/* 左側圖片欄 — 圖:文 = 5:7 */
.site-mega-menu-image {
    flex: 1;
    overflow: hidden;
    display: none;
    /* 預設隱藏，有圖才顯示 */
    align-items: center;
    justify-content: center;
}

.site-mega-menu-image.has-image {
    display: flex;
}

.site-mega-menu-image img {
    height: 100%;
    width: auto;
    display: block;
}

/* 右側連結欄 — 圖:文 = 5:7 */

.site-mega-menu-links {
    flex: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    overflow-y: auto;
}

.site-mega-menu-links a {
    display: block;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    text-decoration: none;
    padding: 5px 0;
    white-space: nowrap;
    transition: color 0.2s;
}

.site-mega-menu-links a:hover {
    color: #888;
}

/* Backdrop — 從 navbar 底部開始 */
.site-mega-menu-backdrop {
    position: fixed;
    top: var(--snav-total-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 898;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.site-mega-menu-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ----------------------------------------------------------------
   語言切換器樣式（在新 navbar 裡）
   ---------------------------------------------------------------- */
.site-navbar-top-left .language-switcher,
.site-navbar-top-left .lang-switcher {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--snav-color);
}

/* ----------------------------------------------------------------
   手機版手風琴選單
   ---------------------------------------------------------------- */

/* 第一層：選單名 + 箭頭 */
.has-accordion .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.has-accordion .accordion-toggle>a {
    flex: 1;
    display: block;
    padding: 14px 20px;
    font-size: var(--font-size-base, 15px);
    color: #000;
    text-decoration: none;
}

/* + 按鈕 */
.has-accordion .accordion-btn {
    flex: 0 0 48px;
    height: 48px;
    background: none;
    border: none;
    border-left: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.has-accordion .accordion-btn:active {
    background: rgba(0, 0, 0, 0.04);
}

/* 箭頭 icon */
.has-accordion .accordion-icon {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

/* 展開時：箭頭向下 */
.has-accordion .accordion-btn[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}

/* 子選單 */
.has-accordion .accordion-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(0, 0, 0, 0.02);
}

/* max-height 由 JS 動態設定為 scrollHeight，不再需要固定值 */

.has-accordion .accordion-submenu li a {
    display: block;
    padding: 12px 20px 12px 20px;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    color: #555;
}

.has-accordion .accordion-submenu li a:active {
    color: #1a1a1a;
}

.zeynep ul>li>a {
    font-weight: 400;
}

.zeynep ul {
    padding-left: 0;
}

@media (max-width: 768px) {
    .info-mobileTab {
        margin-top: 67px;
    }

}

/* ----------------------------------------------------------------
   Editorial Feature Block (ignant style)
   ---------------------------------------------------------------- */
.editorial-feature {
    padding: 60px 0;
}

/* 共用區塊標題 */
.block-section-title {
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: #1a1a1a;
    margin: 0 0 40px;
    font-family: var(--font-base);
}

.ef-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 520px;
}

/* 圖片區 */
.ef-image {
    overflow: hidden;
}

.ef-image-inner {
    width: 100%;
    height: 100%;
}

.ef-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* 文字區 */
.ef-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    background: #f5f5f3;
}

.ef-content-inner {
    max-width: 480px;
    text-align: center;
}

.ef-category {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 28px;
    font-family: var(--font-base);
    font-weight: 400;
}

.ef-category a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s;
}

.ef-category a:hover {
    text-decoration: underline;
    color: #1a1a1a;
}

.ef-cat-dot {
    margin: 0 2px;
    color: #1a1a1a;
}

.ef-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    font-weight: 400;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.ef-desc {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: #555;
    margin-bottom: 40px;
    font-family: var(--font-base);
}

.btn.btn-full,
.btn.btn-border {
    font-size: 13px;
    padding: 10px 48px;
    letter-spacing: 0.15em;
}

@media screen and (max-width: 480px) {

    .psc-qv-action-group .btn.btn-full,
    .psc-qv-action-group .btn.btn-border {
        padding: 10px;
    }
}

.btn-outline-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 48px;
    border: 1px solid var(--outline-button-border-color);
    color: var(--outline-button-text-color);
    background: var(--outline-button-bg-color);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: var(--font-base);
    transition: border-color 0.3s, color 0.3s, background 0.3s;
    min-width: 200px;
}

.btn-outline-arrow:hover {
    border-color: var(--outline-button-border-hover-color);
    color: var(--outline-button-text-hover-color);
    background: var(--outline-button-bg-hover-color);
    text-decoration: none;
}

.btn-outline-arrow--white {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-arrow--white:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.btn-arrow-icon {
    font-size: 18px;
    transition: transform 0.3s;
    position: relative;
    top: -4px;
}

.btn-outline-arrow:hover .btn-arrow-icon {
    transform: translateX(4px);
}

/* 蓋過 contentbuilder content-front.css 的 .html-info a 預設色 (#009e91)，
   讓 .btn-outline-arrow 在 .html-info 容器（空白頁區塊 / blog 內文等）內維持原本配色 */
.html-info a.btn-outline-arrow,
.html-info a.btn-outline-arrow:active,
.html-info a.btn-outline-arrow:focus,
.html-info a.btn-outline-arrow:visited {
    color: var(--outline-button-text-color);
}

.html-info a.btn-outline-arrow:hover {
    color: var(--outline-button-text-hover-color);
}

/* Fade-in-up 動畫 */
.ef-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.ef-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 交錯延遲 */
.ef-fade-up:nth-child(1) {
    transition-delay: 0s;
}

.ef-fade-up:nth-child(2) {
    transition-delay: 0.15s;
}

.ef-fade-up:nth-child(3) {
    transition-delay: 0.3s;
}

.ef-fade-up:nth-child(4) {
    transition-delay: 0.45s;
}

/* RWD 手機版 */
@media (max-width: 991px) {

    .editorial-feature .container {
        padding: 0;
        max-width: 100%;
    }

    .ef-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ef-image {
        position: relative;
        z-index: 1;
    }

    .ef-image-inner img {
        aspect-ratio: 1 / 1;
        width: 100%;
    }

    .ef-content {
        position: relative;
        z-index: 2;
        margin-top: -8rem;
        margin-left: 20px;
        margin-right: 20px;
        padding: 40px 20px;
        background: #f7f7f7;
    }

    .ef-content-inner {
        padding: 0;
    }

    .btn-outline-arrow,
    .btn {
        padding: 10px 36px;
    }

    .btn.btn-outline-secondary {
        padding: 0.375rem 0.75rem;
    }
}

/* ----------------------------------------------------------------
   商品側欄搜尋 — 極簡底線樣式（覆蓋 Bootstrap input-group）
   ---------------------------------------------------------------- */
aside .input-group {
    border-bottom: 1px solid #ddd;
    transition: border-color 0.2s;
    flex-wrap: nowrap;
}

aside .input-group:hover,
aside .input-group:focus-within {
    border-bottom-color: #999;
}

aside .input-group .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px 0;
    font-size: 14px;
    outline: none;
}

aside .input-group .form-control:focus {
    border: none;
    background: transparent;
    box-shadow: none;
}

aside .input-group .input-group-append .btn {
    border: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat center/14px 14px;
    font-size: 0;
    width: 32px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

aside .input-group .input-group-append .btn:hover,
aside .input-group .input-group-append .btn:focus {
    background-color: transparent;
    box-shadow: none;
}

/* ----------------------------------------------------------------
   Peek Carousel Block (ignant style) — 手寫版
   ---------------------------------------------------------------- */
.peek-carousel {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.peek-carousel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 相關輪播（文章內頁等）縮小上下間距 */
.related-carousel {
    padding: 30px 0 60px 0;
}

/* container：overflow visible 讓卡片 peek 出去 */
.peek-container {
    overflow: visible;
}

/* col-xl-10 是 flex item，預設 min-width: auto 會吃裡面 slide 圖片的 intrinsic 寬度（720px×3）
   把 col 撐到 max-width 1303；改 min-width: 0 讓它乖乖照 flex-basis 83.333% 計算 */
.peek-carousel>.container>.row>.col-xl-10,
.person-carousel>.container>.row>.col-xl-10 {
    min-width: 0;
}

/* 商品/活動/課程內頁底部的 related-carousel / related-product-showcase：
   本來這組 partial 是首頁區塊用，有自己的 .container > .row > .col-xl-10 三層巢狀做置中。
   內頁是把它塞進 col-12 mt-5 裡再 echo，三層巢狀會把內容寬縮到 83.33%（viewport 1354 大約少 211px），
   跟上面 tab-home 的 img+info 對不齊。下面把內層 col-xl-10 撐回 100% 填滿外層 col。
   只 scope 在「外層已被 col-xl-10 框住」的情境——blog/article 是把 partial 直接 echo
   在 <main> 外面當頂層 section，需要保留自身的 container 置中機制，不能套這條。 */
.col-xl-10 .related-carousel>.container,
.col-xl-10 .related-product-showcase>.container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.col-xl-10 .related-carousel>.container>.row,
.col-xl-10 .related-product-showcase>.container>.row {
    margin-left: 0;
    margin-right: 0;
}

.col-xl-10 .related-carousel>.container>.row>.col-xl-10,
.col-xl-10 .related-product-showcase>.container>.row>.col-xl-10 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* 標題 + 箭頭 水平排列 */
.peek-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 40px;
}

.peek-header .block-section-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    text-align: left;
}

/* 導航箭頭 — 右側 */
.peek-nav {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
}

.peek-arrow {
    background: none;
    border: none;
    cursor: pointer;
    width: 6rem;
    height: 20px;
    position: relative;
    padding: 0;
    transition: opacity 0.2s;
}

.peek-arrow:hover {
    opacity: 0.5;
}

.peek-arrow.is-disabled {
    opacity: 0.2;
    cursor: default;
}

/* 線條主體 */
.peek-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #1a1a1a;
}

/* 箭頭尖端：隱藏 ::after，改用 .peek-arrow-tip + 額外偽元素 */
.peek-arrow::after {
    display: none;
}

/* 右箭頭 > 尖端 */
.peek-next .peek-arrow-tip,
.peek-next .peek-arrow-tip::after {
    content: '';
    position: absolute;
    right: 0;
    width: 5px;
    height: 1px;
    background: #1a1a1a;
}

.peek-next .peek-arrow-tip {
    top: 50%;
    transform: rotate(-40deg);
    transform-origin: right center;
}

.peek-next .peek-arrow-tip::after {
    top: 0;
    right: 0;
    transform: rotate(80deg);
    transform-origin: right center;
}

/* 左箭頭 < 尖端 */
.peek-prev {
    margin-right: 10px;
}

.peek-prev .peek-arrow-tip,
.peek-prev .peek-arrow-tip::after {
    content: '';
    position: absolute;
    left: 0;
    width: 5px;
    height: 1px;
    background: #1a1a1a;
}

.peek-prev .peek-arrow-tip {
    top: 50%;
    transform: rotate(40deg);
    transform-origin: left center;
}

.peek-prev .peek-arrow-tip::after {
    top: 0;
    left: 0;
    transform: rotate(-80deg);
    transform-origin: left center;
}

/* 輪播軌道 */
.peek-track-wrap {
    overflow: visible;
}

.peek-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    touch-action: pan-y;
}

/* 單張卡片 */
.peek-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: opacity 0.4s ease;
}

.peek-slide.is-outside {
    opacity: 0.2;
}

.peek-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.peek-slide-link:hover {
    text-decoration: none;
    color: inherit;
}

.peek-slide-img {
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

/* 共用卡片標籤 */
.card-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-family: var(--font-base);
    padding: 8px 10px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 0;
}

/* 複數標籤：第 2 個以後依序往下排，避免疊在一起 */
/* badge 高度 = padding 8 + line-height 1 * font-size 11 + padding 8 = 27px，間距 4px */
.card-badge~.card-badge {
    top: 31px;
}

.card-badge~.card-badge~.card-badge {
    top: 62px;
}

.card-badge~.card-badge~.card-badge~.card-badge {
    top: 93px;
}

/* 圖片比例 240/360 = 2:3 */
.peek-ratio {
    display: block;
    position: relative;
    padding-top: calc(240 / 360 * 100%);
    overflow: hidden;
}

.peek-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.peek-slide-link:hover .peek-ratio img {
    transform: scale(1.03);
}

.peek-slide-title a {
    color: inherit;
    text-decoration: none;
}

.peek-slide-title a:hover {
    text-decoration: underline;
}

/* 卡片文字 */
.peek-slide-info {
    padding-top: 4px;
}

.peek-slide-info .ef-category {
    margin-bottom: 10px;
    text-align: left;
}

.peek-slide-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 日期（文章、活動有日期；課程無日期則不顯示） */
.peek-slide-date {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    font-family: var(--font-base);
    letter-spacing: 0.05em;
}

/* 活動列表卡片：日期 + 報名人數 一左一右 */
.event-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.event-meta-row .peek-slide-date {
    margin-top: 0;
}

/* MORE ARTICLES 按鈕 */
.peek-more {
    display: flex;
    justify-content: center;
    padding-top: 60px;
}

/* RWD 手機版 */
@media (max-width: 991px) {
    .peek-carousel {
        padding: 40px 0 60px;
        overflow: hidden;
    }

    .peek-carousel .container.peek-container,
    .person-carousel .container.peek-container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .peek-track-wrap {
        overflow: hidden;
    }

    .peek-more {
        padding-top: 40px;
    }

    .peek-header {
        flex-wrap: wrap;
        justify-content: center;
        padding-right: 0;
        padding-bottom: 24px;
    }

    .peek-header .block-section-title {
        position: static;
        transform: none;
        font-size: 12px;
        width: 100%;
        text-align: center;
        margin-bottom: 16px;
    }

    .peek-nav {
        margin-left: auto;
        margin-right: auto;
    }

    .peek-arrow {
        width: 60px;
        height: 20px;
    }

    .peek-arrow::before {
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   Person Carousel Block (人物介紹輪播)
   ---------------------------------------------------------------- */
.person-carousel {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.person-carousel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.person-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.person-slide-link:hover {
    text-decoration: none;
    color: inherit;
}

.person-avatar {
    width: 100%;
    padding-top: calc(240 / 360 * 100%);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.person-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.person-slide-link:hover .person-avatar img {
    transform: scale(1.05);
}

.person-info {
    padding: 0 4px;
}

.person-name {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 4px;
    color: #1a1a1a;
}

.person-title {
    font-size: var(--font-size-sm);
    color: #888;
    margin: 0;
    line-height: 1.4;
}

/* RWD 手機版 */
@media (max-width: 991px) {
    .person-carousel {
        padding: 40px 0 60px;
    }

    .person-carousel .peek-track-wrap {
        overflow: hidden;
    }

    /* Bootstrap .row 在這些 section 的 .container 無 padding 情況下會外溢 15px
       為避免整頁水平捲動，把這些 section 水平溢出切掉 */
    .editorial-feature,
    .index-editor {
        overflow-x: hidden;
    }
}

/* ----------------------------------------------------------------
   手機版隱藏新 navbar
   ---------------------------------------------------------------- */
@media (max-width: 991px) {

    .site-navbar,
    .site-mega-menu,
    .site-mega-menu-backdrop {
        display: none !important;
    }

    body {
        padding-top: 0;
    }
}

@media screen and (max-width: 480px) {
    .btn-outline-arrow {
        padding: 8px 20px;
    }
}

/* ----------------------------------------------------------------
   IG Mosaic Block
   ---------------------------------------------------------------- */
.ig-mosaic-section {
    padding: 60px 0 80px;
}

.ig-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        "a a b c d"
        "a a e f f"
        "g h i f f";
    gap: 20px;
}

.ig-mosaic-a {
    grid-area: a;
}

.ig-mosaic-b {
    grid-area: b;
}

.ig-mosaic-c {
    grid-area: c;
}

.ig-mosaic-d {
    grid-area: d;
}

.ig-mosaic-e {
    grid-area: e;
}

.ig-mosaic-f {
    grid-area: f;
}

.ig-mosaic-g {
    grid-area: g;
}

.ig-mosaic-h {
    grid-area: h;
}

.ig-mosaic-i {
    grid-area: i;
}

.ig-mosaic-grid div {
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.ig-mosaic-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ig-mosaic-grid img:hover {
    transform: scale(1.03);
}

.ig-mosaic-placeholder {
    background-color: #e8e8e8;
}

@media (max-width: 767px) {
    .ig-mosaic-section {
        padding: 40px 0 60px;
    }

    .ig-mosaic-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "f f"
            "g h"
            "i i";
    }

    .ig-mosaic-grid img {
        aspect-ratio: 1 / 1;
    }

    .btn-outline-arrow {
        min-width: inherit;
    }
}

/* ----------------------------------------------------------------
   Hero Parallax Block (視差大圖)
   ---------------------------------------------------------------- */
.hero-parallax {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero-parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 24px;
}

.hero-parallax-subtitle {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 28px;
    opacity: 0.85;
    font-family: var(--font-base);
}

.hero-parallax-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 24px;
}

.hero-parallax-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 40px;
    font-family: var(--font-base);
}

.hero-parallax-category {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 28px;
    font-family: var(--font-base);
    font-weight: 400;
}

.hero-parallax-category a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.hero-parallax-category a:hover {
    text-decoration: underline;
}

.hero-parallax-dot {
    margin: 0 6px;
}

@media (max-width: 767px) {
    .hero-parallax {
        height: 75vh;
        min-height: 400px;
        background-attachment: scroll;
    }

    .hero-parallax-title {
        font-size: 24px;
    }

    .hero-parallax-subtitle {
        font-size: 11px;
    }
}

.breadcrumb {
    font-weight: 300;
}

/* ----------------------------------------------------------------
   Product Showcase (商品櫥窗)
   ---------------------------------------------------------------- */
.psc-section {
    padding: 60px 0 80px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.tab-pane .psc-section {
    padding-top: 2rem;
}

.psc-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 商品列表 header（標題 + 排序） */
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.product-header__left {
    flex: 1;
    min-width: 0;
}

/* 會員專區：標題與內容之間多一點呼吸空間（其他頁的 product-header 不需要） */
.product-header--member {
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    .product-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

.psc-sort-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 16px;
    padding: 6px 0;
    border-bottom: 1px solid #999;
    transition: border-color 0.2s;
}

.psc-sort-dropdown:hover,
.psc-sort-dropdown:focus-within {
    border-bottom-color: #999;
}

.psc-sort-dropdown::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h13M3 12h9M3 18h5'/%3E%3Cpath d='M17 15l3 3 3-3M20 18V8'/%3E%3C/svg%3E") no-repeat center/contain;
}

.psc-sort-dropdown label {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
    white-space: nowrap;
}

.psc-sort-dropdown select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 4px center;
    border: none;
    border-radius: 0;
    padding: 0 24px 0 0;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
    min-width: 160px;
}

/* 手機版：垂直靠左 */
@media (max-width: 767px) {
    .product-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .psc-sort-dropdown {
        padding-bottom: 0;
        margin-bottom: 12px;
    }
}

/* 網格：桌面 4 欄 */
.psc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 網格：有側邊欄時 3 欄（產品列表頁） */
.psc-grid--sidebar {
    grid-template-columns: repeat(3, 1fr);
}

/* 單張商品卡 */
.psc-card {
    box-sizing: border-box;
}

.psc-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.psc-card__link:hover {
    text-decoration: none;
    color: inherit;
}

/* 圖片容器 — 1:1 正方形 */
.psc-card__media {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 1 / 1;
}

.psc-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 3;
    pointer-events: none;
}

.psc-card__link:hover .psc-card__media::after {
    background: rgba(0, 0, 0, 0.45);
}

/* 圖片 */
.psc-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.45s ease, transform 0.5s ease;
}

.psc-card__img--primary {
    opacity: 1;
    z-index: 1;
}

.psc-card__img--hover {
    opacity: 0;
    z-index: 2;
}

/* Hover：有 hover 圖才切換，否則 primary 微放大保留可見 */
.psc-card__link:hover .psc-card__media:has(.psc-card__img--hover) .psc-card__img--primary {
    opacity: 0;
}

.psc-card__link:hover .psc-card__img--hover {
    opacity: 1;
    transform: scale(1.03);
}

.psc-card__link:hover .psc-card__media:not(:has(.psc-card__img--hover)) .psc-card__img--primary {
    transform: scale(1.03);
}


/* 加入購物車按鈕 — 桌面 hover 從底部滑入 */
.psc-card__action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 16px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 0.3s ease;
}

.psc-card__link:hover .psc-card__action {
    transform: translateY(0);
    opacity: 1;
}

.psc-btn-cart {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    font-family: var(--font-base);
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.psc-btn-cart:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* 手機版購物車按鈕 — 桌面隱藏 */
.psc-card__action-mobile {
    display: none;
}

/* 商品資訊 */
.psc-card__info {
    padding-top: 14px;
    text-align: center;
}

.psc-card__name {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

.psc-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.psc-price-current {
    font-family: var(--font-base);
    font-size: var(--snav-font-size);
    font-weight: 700;
    color: #1a1a1a;
}

.psc-price-original {
    font-family: var(--font-base);
    font-size: var(--snav-font-size);
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

/* ── RWD 手機版 ≤767px ── */
@media (max-width: 767px) {
    .psc-section {
        padding: 40px 0 60px;
    }

    .psc-section .block-section-title {
        font-size: 12px;
        margin-bottom: 28px;
    }

    .psc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .psc-card {
        display: flex;
        flex-direction: column;
    }

    .psc-card__info {
        flex: 1;
    }

    /* 桌面 hover 按鈕隱藏 */
    .psc-card__action {
        display: none;
    }

    /* 手機版購物車 icon 按鈕 — 常駐，推到底部 */
    .psc-card__action-mobile {
        display: block;
        padding-top: 10px;
        margin-top: auto;
    }

    .psc-btn-cart-mobile {
        display: block;
        width: 100%;
        background: #fff;
        color: #1a1a1a;
        border: 1px solid #e0e0e0;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        transition: background 0.2s;
    }

    .psc-btn-cart-mobile:hover {
        background: #f5f5f5;
    }

    .psc-card__price {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .psc-price-current {
        font-size: 15px;
    }

    .psc-price-original {
        font-size: 12px;
    }

    /* 產品列表價格分兩排置中 */
    .price-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .price-row span+span {
        margin-left: 0;
    }
}

/* ── Quick View Modal ── */
.psc-qv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.psc-qv-overlay.is-active {
    display: block;
    opacity: 1;
}

.psc-qv-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 1051;
    background: #fff;
    width: 90%;
    max-width: 820px;
    max-height: 85vh;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.psc-qv-modal.is-active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.psc-qv-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.psc-qv-close:hover {
    color: #1a1a1a;
}

.psc-qv-body {
    padding: 40px;
}

.psc-qv-loading {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 14px;
    font-family: var(--font-base);
}

/* 內容排版：左圖右文 */
.psc-qv-inner {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.psc-qv-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.psc-qv-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #f5f5f5;
}

.psc-qv-info {
    flex: 1;
    min-width: 0;
}

.psc-qv-title {
    font-family: var(--font-special);
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.4;
}

.psc-qv-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.psc-qv-tags li a {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    font-size: 11px;
    color: #666;
    text-decoration: none;
    font-family: var(--font-base);
    transition: border-color 0.2s, color 0.2s;
}

.psc-qv-tags li a:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
}

.psc-qv-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #1a1a1a;
    font-family: var(--font-base);
}

.psc-qv-notice-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.psc-qv-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 12px;
}

.psc-qv-restrictions {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    border-left: 3px solid #e0e0e0;
    padding-left: 12px;
}

.psc-qv-restrictions li {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    font-family: var(--font-base);
}

/* 價格 */
.psc-qv-price-area {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.psc-qv-price-current {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: var(--font-base);
}

.psc-qv-price-original {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    font-family: var(--font-base);
}

/* 規格選擇 */
.psc-qv-specs {
    margin-bottom: 18px;
}

.psc-qv-spec-group {
    margin-bottom: 12px;
}

.psc-qv-spec-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-family: var(--font-base);
}

.psc-qv-spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.psc-qv-spec-list li a {
    display: block;
    padding: 6px 16px;
    border: 1px solid #ddd;
    color: #1a1a1a;
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    font-family: var(--font-base);
}

.psc-qv-spec-list li a:hover {
    border-color: #999;
    text-decoration: none;
    color: #1a1a1a;
}

.psc-qv-spec-list li.chosen a {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
}

.psc-qv-spec-list li.out-of-stock a {
    opacity: 0.35;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* 數量 */
.psc-qv-quantity {
    margin-bottom: 20px;
}

.psc-qv-counter {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    margin-top: 6px;
    width: 100%;
}

.psc-qv-counter-btn {
    width: 36px;
    height: 36px;
    background: #fff;
    border: none;
    font-size: 18px;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.psc-qv-counter-btn:hover {
    background: #f5f5f5;
}

.psc-qv-counter-input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 36px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    font-family: var(--font-base);
    -moz-appearance: textfield;
    appearance: textfield;
}

.psc-qv-counter-btn {
    flex: 0 0 44px;
}

.psc-qv-counter-input::-webkit-inner-spin-button,
.psc-qv-counter-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.psc-qv-stock {
    display: block;
    margin-left: 0;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    font-family: var(--font-base);
}

/* 加入購物車按鈕 */
.psc-qv-add-cart {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: #1a1a1a;
    color: #fff;
    border: none;
    font-size: 14px;
    font-family: var(--font-base);
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 12px;
}

.psc-qv-add-cart:hover {
    background: #333;
}

/* 查看詳情連結 */
.psc-qv-view-detail {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #999;
    text-decoration: underline;
    transition: color 0.2s;
    font-family: var(--font-base);
}

.psc-qv-view-detail:hover {
    color: #1a1a1a;
}

/* 即將開賣提示 */
.psc-qv-sale-status {
    padding: 12px 16px;
    background: #f0f7ff;
    color: #3a6fa0;
    font-size: 13px;
    font-family: var(--font-base);
    margin-bottom: 12px;
    line-height: 1.5;
}

.psc-qv-sale-status i {
    margin-right: 4px;
}

/* ── Quick View Modal RWD ── */
@media (max-width: 767px) {
    .psc-qv-modal {
        width: 95%;
        max-height: 90vh;
    }

    .psc-qv-body {
        padding: 24px 20px;
    }

    .psc-qv-inner {
        flex-direction: column;
        gap: 20px;
    }

    .psc-qv-image {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .psc-qv-title {
        font-size: 18px;
    }

    .psc-qv-price-current {
        font-size: 18px;
    }
}

/* ── 產品內頁 slider 圖片 1:1 ── */
.product-slider-for .slider-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-slider-nav .slider-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ── 加購商品區塊 ── */
.addon-products {
    margin-top: 24px;
    margin-bottom: 24px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    background: #f7f7f7;
}

.addon-products-header {
    background: #efefef;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.addon-products-header i {
    color: #888;
}

.addon-products-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.addon-product-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.addon-product-item:last-child {
    border-bottom: none;
}

/* checkbox */
.addon-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.addon-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #333;
}

/* 商品圖 */
.addon-product-image {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}

.addon-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
}

/* 商品資訊 */
.addon-product-info {
    flex: 1;
    min-width: 0;
}

.addon-product-title {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* 數量控制 */
.addon-product-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.addon-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.15s;
}

.addon-qty-btn:hover {
    background: #f0f0f0;
}

.addon-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.addon-qty-input::-webkit-outer-spin-button,
.addon-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 價格 */
.addon-product-price {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.addon-price-label {
    color: #888;
}

.addon-price-current {
    font-weight: 600;
    color: #222;
}

.addon-limit-hint {
    color: #e25555;
    font-size: 13px;
}

/* RWD */
@media (max-width: 767px) {
    .addon-product-image {
        width: 60px;
        height: 60px;
    }

    .addon-product-item {
        gap: 10px;
        padding: 12px;
    }

    .addon-product-title {
        font-size: 14px;
    }

    .addon-product-price {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .addon-price-current,
    .addon-limit-hint {
        white-space: normal;
        word-break: keep-all;
    }
}

/* ── 產品詳情頁籤 ── */
.product-detail-tabs {
    margin-top: 24px;
}

.product-detail-tab-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    box-shadow: inset 0 -2px 0 #e5e5e5;
}

.product-detail-tab-item {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
}

.product-detail-tab-item:hover {
    color: #333;
}

.product-detail-tab-item.active {
    color: #222;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #222;
}

.product-detail-tab-content {
    display: none;
    padding: 30px 0;
}

.product-detail-tab-content.active {
    display: block;
}

.product-tab-placeholder h4 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px 0;
}

.product-tab-placeholder h4:not(:first-child) {
    margin-top: 28px;
}

.product-tab-placeholder ul {
    margin: 0;
    padding-left: 20px;
}

.product-tab-placeholder li {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

@media (max-width: 767px) {
    .product-detail-tab-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .product-detail-tab-item {
        padding: 12px 16px;
        font-size: 14px;
    }

    .product-detail-tab-content {
        padding: 20px 0;
    }
}

/* ========== Index Banner Full Viewport Height ========== */
.index-banner-slider {
    min-height: 100vh;
}

.index-banner-for,
.index-banner-for .slick-list,
.index-banner-for .slick-track,
.index-banner-for .slick-item {
    height: 100vh;
}

.index-banner-for .slick-item a {
    display: block;
    height: 100%;
}

.index-banner-for .slick-item picture,
.index-banner-for .slick-item .banner-video-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

.index-banner-for .slick-item picture img,
.index-banner-for .slick-item .banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 590px) {

    .index-banner-for .slick-item .banner-video-mobile-fallback,
    .index-banner-for .slick-item .banner-video-mobile-fallback img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

aside>ul>li>a[aria-expanded=true],
aside>ul>li>a.selected {
    font-weight: 500;
}

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1600px;
    }
}

@media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1600px;
    }
}

.col-xl-10,
.col-md-12,
#tab-home {
    max-width: 1303px;
    margin-right: auto;
    margin-left: auto;
    /* flex item 預設 min-width: auto = min-content，內層有大圖/slider/不換行元素
       會把 col 從 flex-basis 83.33% 撐到 max-width 1303。viewport 介於
       container max-width(1600) 與 1303/0.8333 之間時，list 頁停在 83.33%、
       detail 頁被內容撐到 1303，看起來寬度不一致——強制 min-width 0 讓兩邊
       一致以 flex-basis 計算（peek-carousel 1284 也是同樣理由處理）。 */
    min-width: 0;
}

/* footer / 空白頁面區塊 (free_editor) 內容寬度跟 col-xl-10 對齊：
   - xl (≥1200)：跟 col-xl-10 一樣 flex-basis 83.333%，撞到 1303 才 cap，
     避開先前 footer / FAQ 等在 viewport 1200~1564 比 col-xl-10 寬的問題。
   - <xl：保留 max-width 1303 fallback，container 自己會吃 viewport 寬度（手機/平板已等寬）。
   .index-editor 是 free_editor page block 的 wrapper，full_width='no' 時會用 .container；
   命中 selector 只在 .index-editor 內，避免影響其他 .container 用途。 */
footer .container,
.index-editor>.html-info>.container {
    max-width: 1303px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px) {

    footer .container,
    .index-editor>.html-info>.container {
        max-width: min(1303px, 83.333%);
    }
}

/* ----------------------------------------------------------------
   空白頁區塊（free_editor / CKEditor 區塊）共用骨架
   - .youc-section：每個區塊的「全寬突破」+ 標準 z-index 堆疊
     讓 section 跳出 .col-md-12 的 1303px 鎖、並蓋住 chanel-style fixed footer
   - .youc-section-title：「區塊主標」共用文字樣式（42px Playfair）
   - HTML 上仍會 inline 同樣的屬性，是為了 CKEditor 編輯介面內預覽
   - padding / background-color / height 等與單一區塊相關的屬性還是各區塊自己 inline
   ---------------------------------------------------------------- */
.youc-section {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.youc-section-title {
    font-family: var(--font-serif);
    font-weight: 300;
    color: #1a1a1a;
    font-size: var(--font-size-2xl);
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin: 0 0 clamp(40px, 7vw, 80px);
}

/* ----------------------------------------------------------------
   商品內頁 v2：隱藏左側分類、動作按鈕群、sticky 購買列
   ---------------------------------------------------------------- */
.product-detail-v2 #tab-side {
    display: none !important;
}

.product-detail-v2 .info-mobileTab {
    display: none;
}

.product-detail-v2 .pagging-title {
    display: none;
}

/* .aside-content 預設 margin: 0 -15px（main.css 21854），原意是當作 .row 替身
   讓內層 .col-* 的 padding 對齊外緣。但實際 markup 是 .container > .row > .aside-content
   雙層巢狀，兩層各自負 margin 會累積位移，把裡面 col-xl-10（max-width 1303 + margin auto
   置中）整塊往左推 15px，跟同 .container > .row > .col-xl-10 的 list 頁對不齊。
   下面這條把 .row 內 .aside-content 的水平負 margin 歸零，讓 col-xl-10 真正置中、
   各列表/內頁寬度位置一致。手機/平板 main.css 21966 早就 margin: 0 auto，無影響。 */
.row>.aside-content {
    margin-left: 0;
    margin-right: 0;
}

/* btn 加 icon */
.btn.btn-w-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 加入購物車 + 立即購買 並排 */
.psc-qv-action-group {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.psc-qv-action-group .btn {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.psc-qv-action-group .btn.btn-border {
    background: #fff;
}

/* 電話聯絡：去框線 + icon */
.btn-phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 0;
    color: #1a1a1a;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-decoration: none;
    background: transparent;
    border: none;
}

.btn-phone-link:hover,
.btn-phone-link:focus {
    color: #666;
    text-decoration: none;
}

/* sticky 購買列：手機置底 / 桌機置頂 */
.product-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: transparent;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.product-sticky-bar.is-visible {
    transform: translateY(0);
}

.product-sticky-bar>.container {
    max-width: none;
    padding: 0;
}

.product-sticky-bar__inner {
    display: flex;
    gap: 0;
}

.product-sticky-bar .btn {
    flex: 1;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    padding: 10px 20px;
}

.product-sticky-bar .btn.btn-border {
    background: #fff;
}

@media (min-width: 992px) {
    .product-sticky-bar {
        left: auto;
        right: 24px;
        bottom: auto;
        top: 160px;
        width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
    }

    .product-sticky-bar.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .product-sticky-bar>.container {
        max-width: none;
        padding: 0;
    }

    .product-sticky-bar__inner {
        gap: 12px;
    }

    .product-sticky-bar .btn {
        flex: 0 0 auto;
        min-width: 160px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
}

/* ----------------------------------------------------------------
   卷軸樣式：細、淺
   ---------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #d5d5d5 transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #d5d5d5;
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

/* ==================================   右下聯絡彈窗 contact-popup
========================================= */
.contact-popup-wrap {
    position: fixed;
    right: 20px;
    bottom: 60px;
    z-index: 9998;
}

.contact-popup-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #111;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
}

.contact-popup-btn:hover {
    background: #000;
    transform: translateY(-2px);
}

.contact-popup-btn .icon-close {
    display: none;
}

.contact-popup-btn.is-open .icon-bubble {
    display: none;
}

.contact-popup-btn.is-open .icon-close {
    display: block;
}

.contact-popup {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: 340px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.contact-popup.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.contact-popup-header {
    background: #111;
    color: #fff;
    padding: 24px 20px 20px;
    position: relative;
}

.contact-popup-header h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: var(--font-size-md);
}

.contact-popup-header p {
    margin: 0;
    font-size: 14px;
    opacity: .9;
}

.contact-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: .8;
}

.contact-popup-close:hover {
    opacity: 1;
}

.contact-popup-body {
    padding: 16px;
    background: #f7f7f7;
}

.contact-popup-title {
    margin: 0px 0 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.contact-popup-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-popup-list li+li {
    margin-top: 8px;
}

.contact-popup-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 8px;
    color: #111;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s;
}

.contact-popup-list a:hover {
    background: #efefef;
}

.contact-popup-list .ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.contact-popup-list .ico.chat {
    background: #3b82f6;
}

.contact-popup-list .ico.line {
    background: #06c755;
}

.contact-popup-list .ico.ig {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.contact-popup-list .ico.messenger {
    background: linear-gradient(45deg, #0078ff, #ff0098);
}

.contact-popup-list .ico.mail {
    background: #4f8cff;
}

@media (max-width: 576px) {
    .contact-popup {
        width: calc(100vw - 24px);
        right: -8px;
    }

    .contact-popup-wrap {
        bottom: 40px;
    }
}

.fixed-bottom-contant {
    top: auto;
    bottom: 200px;
}

#gotop {
    display: none;
}

.sticky-purchase {
    top: 140px;
}

/* =========================================================   FILTER TOOLBAR — 搜尋 + 分類篩選 + 排序（底線風格，與麵包屑同排）
   ================================================================ */
.filter-toolbar {
    display: flex;
    align-items: stretch;
    gap: 18px;
    flex-shrink: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.filter-toolbar__search,
.filter-toolbar__btn,
.filter-toolbar .psc-sort-dropdown {
    box-sizing: border-box;
    height: 34px;
    margin-bottom: 0;
}

/* -- 搜尋（底線風格） -- */
.filter-toolbar__search {
    position: relative;
    width: 160px;
    flex-shrink: 0;
}

.filter-toolbar__search-toggle {
    display: none;
    /* 桌機隱藏，直接顯示搜尋框 */
}

.filter-toolbar__search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
    width: 100%;
    height: 100%;
}

.filter-toolbar__search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    min-width: 0;
    background: transparent;
    color: #333;
}

.filter-toolbar__search-input::placeholder {
    color: #999;
}

.filter-toolbar__search-submit {
    background: none;
    border: none;
    padding: 0;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.filter-toolbar__search-submit:hover {
    color: #000;
}

.filter-toolbar__search-close {
    display: none;
    /* 桌機不需要關閉鈕 */
    background: none;
    border: none;
    padding: 0 2px;
    color: #999;
    cursor: pointer;
    font-size: 14px;
}

/* -- 分類篩選按鈕（底線風格，同行事曆 cal-filter__toggle） -- */
.filter-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    width: 160px;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}

.filter-toolbar__btn:hover {
    color: #000;
}

.filter-toolbar__icon {
    flex-shrink: 0;
    color: #333;
}

.filter-toolbar__btn span {
    flex: 1;
    text-align: left;
}

.filter-toolbar__arrow {
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* 桌機：預設排序寬度對齊分類 */
.filter-toolbar .psc-sort-dropdown {
    width: 160px;
    padding: 0;
    flex-shrink: 0;
}

.filter-toolbar .psc-sort-dropdown select {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* 手機版 toolbar：搜尋一排，分類/排序 50/50 */
@media (max-width: 767px) {
    .filter-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-rows: 34px;
        width: 100%;
        gap: 12px;
        align-items: stretch;
    }

    .filter-toolbar__search {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        height: 34px;
    }

    /* split 版本：搜尋與分類 50/50 同排（用於部落格列表，沒有排序欄） */
    .filter-toolbar--split .filter-toolbar__search {
        grid-column: auto;
    }

    .filter-toolbar__btn {
        min-width: 0;
    }

    .filter-toolbar__search-box {
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .filter-toolbar__btn,
    .filter-toolbar .psc-sort-dropdown {
        width: 100%;
    }

    .filter-toolbar .psc-sort-dropdown select {
        width: 100%;
    }
}

/* =========================================================   FILTER DRAWER — 分類篩選 bottom sheet
   ================================================================ */
.filter-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.filter-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.filter-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    min-height: 50vh;
    max-height: 70vh;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.filter-drawer.is-open {
    transform: translateY(0);
}

.filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.filter-drawer__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.filter-drawer__close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.filter-drawer__close:hover {
    color: #333;
}

.filter-drawer__body {
    overflow-y: auto;
    padding: 16px 20px 24px;
    -webkit-overflow-scrolling: touch;
}

/* -- 分類列表 -- */
/* -- 分類列表：桌機多欄群組排列，手機垂直 -- */
.filter-drawer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 64px;
    align-items: flex-start;
}

.filter-drawer__menu>li>a {
    display: block;
    padding: 8px 0;
    color: #444;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.filter-drawer__menu>li>a:hover {
    color: #000;
}

.filter-drawer__menu>li>a.is-active {
    font-weight: 600;
    color: var(--link-color, #333);
}

/* -- 母分類（群組標題） -- */
.filter-drawer__parent {
    display: block;
    padding: 8px 0 4px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.filter-drawer__parent:hover {
    color: #000;
}

.filter-drawer__parent.is-active {
    color: var(--link-color, #333);
}

.filter-drawer__count {
    font-size: 13px;
    color: #999;
    margin-left: 2px;
}

/* -- 子分類（群組內垂直排列） -- */
.filter-drawer__sub {
    list-style: none;
    padding: 0 0 4px;
    margin: 0;
}

.filter-drawer__sub li a {
    display: block;
    padding: 4px 0;
    color: #888;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.filter-drawer__sub li a:hover {
    color: #000;
}

.filter-drawer__sub li a.is-active {
    font-weight: 600;
    color: var(--link-color, #333);
}

.filter-drawer__parent--lv2 {
    padding: 6px 0 2px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.filter-drawer__sub--lv3 {
    padding-left: 12px;
}

.filter-drawer__sub--lv3 li a {
    color: #aaa;
    font-size: 12px;
}

/* 手機版：改回垂直排列 */
@media (max-width: 767px) {
    .filter-drawer__menu {
        flex-direction: column;
        gap: 0;
    }

    .filter-drawer__sub {
        padding-left: 16px;
        padding-bottom: 8px;
    }

    .filter-drawer__sub--lv3 {
        padding-left: 16px;
    }
}

/* -- Tags -- */
.filter-drawer__tags {
    margin-top: 32px;
}

.filter-drawer__tags-title {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.filter-drawer__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-drawer__tag {
    display: inline-block;
    padding: 5px 12px;
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.filter-drawer__tag::before {
    content: "# ";
    color: #aaa;
}

.filter-drawer__tag:hover {
    background: #eee;
    color: #333;
    text-decoration: none;
}


/* =========================================================   COURSE DETAIL PAGE - 學習頁樣式優化 (override)
   ================================================================ */

body.course-detail-page {
    background: #f7f7f7;
    color: #1a1a1a;
}

body.course-detail-page .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

body.course-detail-page .container-fluid>.row {
    margin-right: 0;
    margin-left: 0;
}

body.course-detail-page .aside-content.course {
    overflow: visible;
    width: 100%;
}

/* ---- 頂部 Nav ---- */
body.course-detail-page .course-nav {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    height: 60px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
}

body.course-detail-page .course-nav .logo-img img {
    max-height: 20px;
    width: auto;
}

body.course-detail-page .course-nav a {
    color: #1a1a1a;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.course-detail-page .course-nav a:hover {
    color: var(--primary-color);
}

/* ---- 主佈局 ---- */
body.course-detail-page .course-detail-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
}

body.course-detail-page .course-sidebar-desktop {
    flex: 0 0 340px;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    align-self: flex-start;
}

body.course-detail-page .course-main-content {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    padding: 24px 32px 40px;
}

body.course-detail-page .course-chapters-mobile {
    margin-top: 24px;
}

@media (min-width: 992px) {
    body.course-detail-page .course-chapters-mobile {
        display: none;
    }
}

@media (max-width: 991px) {
    body.course-detail-page .course-detail-layout {
        flex-direction: column;
        padding: 12px;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.course-detail-page .course-sidebar-desktop {
        display: none;
    }

    body.course-detail-page .course-main-content {
        width: 100%;
    }

    body.course-detail-page .video-container {
        border-radius: 10px;
    }
}

/* ---- 側邊欄：滿版貼齊、獨立捲動 ---- */
body.course-detail-page .course-sidebar-desktop,
body.course-detail-page .course-chapters-wrapper,
body.course-detail-page .course-aside-content,
body.course-detail-page .course-aside-content .course-title-group {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.course-detail-page .course-chapters-wrapper {
    background: #fff;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.course-detail-page .course-aside-content {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    flex: 1;
}

body.course-detail-page .course-aside-content::-webkit-scrollbar {
    width: 6px;
}

body.course-detail-page .course-aside-content::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

body.course-detail-page .course-chapters-mobile .course-aside-content {
    max-height: none;
}

/* ---- 課程標題 + 進度條 ---- */
body.course-detail-page .course-aside-content .course-title-group {
    margin-bottom: 0;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #fff;
    overflow: visible;
}

body.course-detail-page .course-aside-content .course-title-group>h2 {
    background: transparent !important;
    color: #1a1a1a !important;
    text-align: left !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
    font-family: var(--font-base);
}

body.course-detail-page .course-aside-content .course-title-group .title-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.course-detail-page .course-aside-content .course-title-group .title-info>span {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.04em;
}

body.course-detail-page .course-aside-content .progress-bar {
    height: 5px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

body.course-detail-page .course-aside-content .progress-bar::before {
    display: none;
}

body.course-detail-page .course-aside-content .progress-bar>span {
    display: block;
    position: relative;
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
    top: 0;
    transition: width 0.3s ease;
}

/* ---- Chapter 清單 ---- */
body.course-detail-page .course-aside-content .course-aside {
    padding: 4px 0;
    margin: 0;
    list-style: none;
}

body.course-detail-page .course-aside-content .course-aside>li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.course-detail-page .course-aside-content .course-aside>li:last-child {
    border-bottom: 0;
}

body.course-detail-page .course-aside-content .course-aside>li>a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 0;
    font-size: 14px;
    color: #1a1a1a;
    background: transparent;
    transition: background 0.2s;
    position: relative;
    text-decoration: none;
}

body.course-detail-page .course-aside-content .course-aside>li>a:hover {
    background: rgba(0, 0, 0, 0.025);
}

body.course-detail-page .course-aside-content .course-aside>li>a::after {
    content: "\f107";
    right: 14px;
    color: #aaa;
    font-size: 12px;
    transition: transform 0.3s ease;
}

body.course-detail-page .course-aside-content .course-aside>li>a[aria-expanded="true"]::after {
    content: "\f106";
    color: var(--primary-color);
}

body.course-detail-page .course-aside-content .course-aside>li>a[aria-expanded="true"] {
    background: #f7f7f7;
    border-bottom-color: transparent;
}

body.course-detail-page .course-aside-content .course-aside>li>a .check-box {
    width: 20px;
    height: 20px;
    border: 1.5px solid #d5d5d5;
    border-radius: 50%;
    flex: 0 0 20px;
    max-width: 20px;
    margin-right: 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.course-detail-page .course-aside-content .course-aside>li>a .check-box>i {
    font-size: 9px;
    color: transparent;
}

body.course-detail-page .course-aside-content .course-aside>li.complete>a .check-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.course-detail-page .course-aside-content .course-aside>li.complete>a .check-box>i {
    color: #fff;
}

body.course-detail-page .course-aside-content .course-aside>li>a .chapter-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    line-height: 1.5;
    padding-right: 8px;
    white-space: normal;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

body.course-detail-page .course-aside-content .course-aside>li>a .chapter-name small {
    font-size: 11px;
    color: #aaa;
    margin-left: 2px;
}

body.course-detail-page .course-aside-content .course-aside>li>a .progress-rate {
    flex: 0 0 auto;
    max-width: none;
    font-size: 12px;
    color: #888;
    margin-right: 20px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---- 小節列表 (展開後) ---- */
body.course-detail-page .course-aside-content .course-aside>li>.collapse,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing {
    background: #f7f7f7;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a {
    display: flex;
    align-items: center;
    padding: 10px 18px 10px 50px;
    font-size: 13px;
    color: #555;
    border: 0;
    position: relative;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    line-height: 1.5;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a:hover,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a:hover {
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.025);
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a+a::before,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a+a::before {
    display: none !important;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a .check-box,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a .check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid #d5d5d5;
    border-radius: 50%;
    margin-right: 10px;
    flex: 0 0 16px;
    max-width: 16px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a .check-box>i,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a .check-box>i {
    font-size: 8px;
    color: transparent;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a.complete .check-box,
body.course-detail-page .course-aside-content .course-aside>li>.collapse>a[class*="complete"] .check-box,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a[class*="complete"] .check-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a.complete .check-box>i,
body.course-detail-page .course-aside-content .course-aside>li>.collapse>a[class*="complete"] .check-box>i,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a[class*="complete"] .check-box>i {
    color: #fff;
}

/* 小節中的 badge 樣式 */
body.course-detail-page .course-aside-content .course-aside .badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0 4px 0 0 !important;
    vertical-align: middle;
    height: auto;
    white-space: nowrap;
}

body.course-detail-page .course-aside-content .course-aside p.badge {
    margin-bottom: 0 !important;
}

body.course-detail-page .course-aside-content .course-aside .badge-secondary {
    background: #eee;
    color: #666;
}

body.course-detail-page .course-aside-content .course-aside .badge-warning {
    background: #fff4d6;
    color: #b47a00;
}

/* 小節 a 容器：讓 badge + 標題自然換行 */
body.course-detail-page .course-aside-content .course-aside>li>.collapse>a,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a {
    flex-wrap: wrap;
    row-gap: 4px;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a>span:last-child,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a>span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

body.course-detail-page .course-aside-content .course-aside>li>.collapse>a:has(.badge)>span:last-child,
body.course-detail-page .course-aside-content .course-aside>li>.collapsing>a:has(.badge)>span:last-child {
    flex: 1 1 100%;
    padding-left: 26px;
    margin-top: 2px;
}

/* ---- 主內容區 ---- */
body.course-detail-page .course-content {
    height: auto;
    padding-bottom: 0;
    background: transparent;
    position: static;
}

body.course-detail-page .course-display {
    position: static;
    overflow: visible;
    padding: 0;
    margin-bottom: 0;
    top: auto;
    bottom: auto;
}

/* 視頻容器 (YouTube / Vimeo / Aten) */
body.course-detail-page .video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding: 56.25% 0 0 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    margin: 0;
}

body.course-detail-page .video-container iframe,
body.course-detail-page .video-container video,
body.course-detail-page .video-container .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

body.course-detail-page .course-display>.video {
    max-width: none;
    width: 100%;
    margin: 0 0 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body.course-detail-page .course-display>.video .video-js {
    width: 100% !important;
    height: auto;
}

/* 音頻播放器 */
body.course-detail-page .course-display .audio {
    background: #fff;
    border-radius: 14px;
    padding: 32px 20px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 小節 / 課程 標題 */
body.course-detail-page .course-display>h1,
body.course-detail-page .course-display .title {
    text-align: left;
    font-size: var(--font-size-2xl);
    font-family: var(--font-special, Georgia, serif);
    color: #1a1a1a;
    margin: 0 0 12px;
    padding-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    border: 0;
}

body.course-detail-page .course-display .text-center {
    text-align: left !important;
}

/* 課程內文 */
body.course-detail-page .course-display .html-info,
body.course-detail-page .course-display .html-area {
    width: 100%;
    margin: 0;
    padding: 0 2px;
    font-size: 15px;
    line-height: 1.85;
    color: #333;
    display: block;
    height: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

body.course-detail-page .course-display .html-info img,
body.course-detail-page .course-display .html-area img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
}

/* CKEditor 內嵌 iframe / YouTube embed 防溢出 */
body.course-detail-page .course-display .html-info iframe,
body.course-detail-page .course-display .html-area iframe {
    max-width: 100%;
}

body.course-detail-page .course-display .html-info .youtube-embed-wrapper,
body.course-detail-page .course-display .html-area .youtube-embed-wrapper {
    position: relative !important;
    max-width: 100%;
    width: 100%;
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background: #000;
}

body.course-detail-page .course-display .html-info .youtube-embed-wrapper iframe,
body.course-detail-page .course-display .html-area .youtube-embed-wrapper iframe {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* 表格自動換行／橫向捲動 */
body.course-detail-page .course-display .html-info table,
body.course-detail-page .course-display .html-area table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

body.course-detail-page .course-display .html-info table td,
body.course-detail-page .course-display .html-info table th,
body.course-detail-page .course-display .html-area table td,
body.course-detail-page .course-display .html-area table th {
    word-break: break-word;
}

/* 程式碼區塊 / 預格式化文字 */
body.course-detail-page .course-display .html-info pre,
body.course-detail-page .course-display .html-area pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 檔案下載區 */
body.course-detail-page .course-display .file-download {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.course-detail-page .course-display .file-download .file-info {
    padding: 0;
    flex: 1;
    min-width: 0;
}

body.course-detail-page .course-display .file-download .file-info>h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.course-detail-page .course-display .file-download .file-info>p {
    font-size: 12px;
    color: #888;
    margin: 0;
}

body.course-detail-page .course-display .file-download .btn-full {
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    flex: 0 0 auto;
    margin: 0;
}

/* ---- Footer (標記完成 / 下一單元) ---- */
body.course-detail-page .display-footer {
    position: static;
    height: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 20px 0 8px;
    margin-top: 28px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
}

body.course-detail-page .display-footer .btn {
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

body.course-detail-page .display-footer .btn-full,
body.course-detail-page .display-footer #button_go_to_next_uncompleted_section {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

body.course-detail-page .display-footer .btn-full:hover,
body.course-detail-page .display-footer #button_go_to_next_uncompleted_section:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.course-detail-page .display-footer .btn-outline-success {
    background: #fff;
    border: 1px solid #d5d5d5;
    color: #555;
}

body.course-detail-page .display-footer .btn-outline-success:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

body.course-detail-page .display-footer .btn-success {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ---- Intro 頁 (尚未選擇單元) ---- */
body.course-detail-page .course-display>h1:first-child {
    text-align: center;
    margin: 8px 0 24px;
}

body.course-detail-page .course-display>.col-12.text-center img {
    max-width: 100%;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ---- 響應式調整 ---- */
@media (max-width: 768px) {

    body.course-detail-page .course-display>h1,
    body.course-detail-page .course-display .title {
        font-size: 22px;
        margin: 20px 0 10px;
    }

    body.course-detail-page .course-display>h1:first-child {
        font-size: 24px;
    }

    body.course-detail-page .display-footer {
        flex-direction: column-reverse;
        padding: 16px 0 8px;
    }

    body.course-detail-page .display-footer .btn {
        width: 100%;
        justify-content: center;
    }

    body.course-detail-page .course-nav {
        padding: 0 16px;
        height: 54px;
    }

    body.course-detail-page .course-display .html-info,
    body.course-detail-page .course-display .html-area {
        font-size: 14px;
        line-height: 1.75;
    }
}

/* drawer 滿版，不限寬 */

.event-block>.text-box>p {
    font-size: var(--snav-font-size);
}

.event-block .ef-category {
    margin-bottom: 10px;
}

.event-block .img-box {
    margin-bottom: 20px;
}

.course-block .course-block-footer>li {
    font-size: var(--snav-font-size);
}

.event-block>.text-box>h3 {
    margin-bottom: 8px;
    font-weight: 300;
}

.btn,
.purchase-block .event-state {
    font-size: var(--snav-font-size);
}

.purchase-block,
.purchase-block small,
.purchase-block .badge.badge-light {
    font-size: var(--snav-font-size);
    font-weight: 400;
}

.purchase-block h4 {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.course-info-list {
    color: #1a1a1a !important;
}

.purchase-block small {
    margin-bottom: 0 !important;
}

.purchase-content {
    padding: 20px 24px 10px 24px;
}

/* ── Global Search Bar ── */
/* 不再覆寫 .site-navbar 的 position（原本是 fixed），fixed 本身就是 .gsearch-bar 絕對定位的 anchor */

.gsearch-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--snav-bg-scrolled, #fff);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 899;
}

.gsearch-bar.is-open {
    max-height: 88px;
    opacity: 1;
    pointer-events: auto;
}

.gsearch-form {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 520px;
    margin: 0 auto;
    padding: 18px 24px 20px;
}

.gsearch-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: .95rem;
    background: #f4f4f4;
    border-radius: 999px;
    padding: 10px 18px;
    color: inherit;
    transition: background .2s ease;
}

.gsearch-input:focus {
    background: #ececec;
}

.gsearch-input::placeholder {
    color: #aaa;
}

.gsearch-submit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 8px 10px;
    opacity: .55;
    color: inherit;
    transition: opacity .2s ease;
}

.gsearch-submit:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .gsearch-form {
        max-width: none;
        padding: 14px 16px 16px;
    }
}

/* search bar 用 .gsearch-bar { position: absolute }，anchor 是 .mobile-menu 既有的 position:fixed（@media max-width:992px）；不需要在這裡覆寫成 relative，那會把 fixed 蓋掉、整站手機版主選單失去置頂 */

/* ── Search Results Page ── */
.search-page {
    padding: 60px 0 80px;
}

.search-page__header {
    margin-bottom: 32px;
}

.search-page__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.search-page__subtitle {
    color: #888;
    font-size: .9rem;
}

.search-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid #eee;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.search-tab {
    padding: 10px 18px;
    font-size: .9rem;
    text-decoration: none;
    color: #555;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    transition: color .2s;
}

.search-tab:hover {
    color: #111;
    text-decoration: none;
}

.search-tab.is-active {
    color: #111;
    border-bottom-color: #111;
    font-weight: 600;
}

.search-tab__count {
    font-size: .75rem;
    background: #eee;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 4px;
    color: #555;
}

.search-section {
    margin-bottom: 48px;
}

.search-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.search-section__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.search-section__more {
    font-size: .85rem;
    color: #888;
    text-decoration: none;
}

.search-section__more:hover {
    color: #111;
}

.search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-item {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.search-item__thumb {
    width: 80px;
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f5f5;
    display: block;
}

.search-item__thumb--empty {
    background: #f0f0f0;
}

.search-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item__body {
    flex: 1;
    min-width: 0;
}

.search-item__title {
    font-size: .95rem;
    font-weight: 500;
    margin: 0 0 4px;
    line-height: 1.4;
}

.search-item__title a {
    color: inherit;
    text-decoration: none;
}

.search-item__title a:hover {
    text-decoration: underline;
}

.search-item__meta {
    font-size: .8rem;
    color: #888;
    margin: 0;
}

.search-empty {
    text-align: center;
    padding: 80px 24px;
    color: #888;
}

.search-empty__title {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #444;
}

.search-empty__text {
    margin-bottom: 24px;
}

.search-pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.search-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: .85rem;
    text-decoration: none;
    color: #555;
    transition: background .15s;
}

.search-pag-btn:hover {
    background: #f5f5f5;
    text-decoration: none;
    color: #111;
}

.search-pag-btn.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
}


.purchase-block {
    box-shadow: none;
    border: 0px;
    border-bottom: 1px solid #000;
    border-radius: 0;
}

.purchase-block:hover {
    transform: translateY(-5px);
    box-shadow: none;
}

.expired-specs-section {
    margin-top: 20px;
}

.expired-specs-summary {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f7f7f7;
    border-radius: 0;
    border-left: 4px solid #000;
    font-weight: 400;
    user-select: none;
}

.expired-specs-summary i.fa-archive,
.expired-specs-summary i.fa-solid.fa-archive {
    margin-right: 8px;
}

.expired-specs-body {
    padding: 12px 0;
    margin-top: 12px;
}

.btn-primary {
    font-size: 13px;
    letter-spacing: 0.15em;
    padding: 10px 48px;
    border: 0px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border-radius: var(--button-radius, 8px);
}

.form-control {

    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn {
    border-radius: var(--button-radius, 8px);
}

body.blank-page .content {
    background-color: #fff;
}

.container img {
    margin: 0px;
}