/* dHConcept custom.css v12 */CSS - 20260316-v10
 * 各區塊完全獨立，互不干擾
 *
 * 區塊 0：margin-header margin-top 修正（Slogan 完整顯示）
 * 區塊 1：Banner（.margin-header .carousel-section-case）- 橫向滑動
 * 區塊 2：Slogan（.carousel-consult h2）- 不動
 * 區塊 3：三張圖（#stepbystep）- 手機版修正
 * 區塊 4：單品改造空間（#dh-section-single）- min-width 修正
 * 區塊 5：探索更多（#dh-section-explore）- min-width 修正
 * 區塊 6：媒體聚光燈（#dh-section-media）- min-width 修正
 * 區塊 7：Apple 等級文字系統 - 全首頁字體大小統整
 * 區塊 8：商品頁 sticky 面板遮擋修正 - 方案區/QA/LINE banner
 * 區塊 9：歐巴地板案例圖片橫向滑動 carousel
 * 區塊 10：歐巴地板 6 張特色圖片 2x3 grid 排列（手機/平板）
 * 區塊 11：商品頁 sticky 購買面板隱藏（全裝置）
 * 區塊 12：案例選擇區塊 Apple 級重新設計（3 tabs + carousel）
 * 區塊 13：商品頁 Apple 級 Typography System（文字排版統一）
 */

/* ========================================================
   區塊 0：修正 margin-header margin-top
   原始設定 80px（只有 navbar 高度），但 fixed header = 124px
   需要改為 124px 才能讓 Slogan 第一行完整顯示
   ======================================================== */
.margin-header {
    margin-top: 124px !important;
}

/* ========================================================
   區塊 1：Banner 橫向滑動（僅限 .margin-header 內）
   ======================================================== */

.margin-header .carousel-section-case {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
}

.margin-header .carousel-section-case::-webkit-scrollbar {
    display: none !important;
}

.margin-header .carousel-section-case .content-carousel {
    flex: 0 0 75vw !important;
    width: 75vw !important;
    min-width: 75vw !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

@media (min-width: 1024px) {
    .margin-header .carousel-section-case {
        gap: 28px !important;
    }
    .margin-header .carousel-section-case .content-carousel {
        flex: 0 0 calc((100% - 2 * 28px) / 3.5) !important;
        width: calc((100% - 2 * 28px) / 3.5) !important;
        min-width: 0 !important;
    }
}

.margin-header .carousel-section-case .content-carousel img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07) !important;
}

.margin-header .carousel-section-case .embed-responsive {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

.margin-header .carousel-section-case .embed-responsive-item,
.margin-header .carousel-section-case .embed-responsive img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}

.margin-header .carousel-section-case .slick-list {
    overflow: hidden !important;
}

/* ========================================================
   區塊 2：Slogan - 完全不動，不加任何樣式
   ======================================================== */

/* ========================================================
   區塊 3：三張圖（#stepbystep）- 手機版修正
   ======================================================== */

@media (max-width: 767px) {
    #stepbystep .carousel-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        gap: 16px !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    #stepbystep .carousel-section::-webkit-scrollbar {
        display: none !important;
    }

    #stepbystep .carousel-section .style-list {
        flex: 0 0 85vw !important;
        width: 85vw !important;
        min-width: 85vw !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
        float: none !important;
        display: block !important;
    }

    #stepbystep .carousel-section .style-list .check-div {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-top: 50.625% !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    #stepbystep .carousel-section .style-list h2 {
        position: static !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: left !important;
        padding: 8px 4px 4px !important;
        margin: 0 !important;
        white-space: normal !important;
        height: auto !important;
        background: transparent !important;
    }

    #stepbystep .carousel-section .style-list label {
        height: auto !important;
        display: block !important;
    }
}

/* ========================================================
   區塊 3b：三張圖（#stepbystep）- iPad 版修正（768px-1024px）
   ======================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* 三張圖：圖片容器讓文字可顯示 */
    #stepbystep .carousel-section .style-list label.uk-height-small {
        overflow: visible !important;
        height: auto !important;
        min-height: 300px !important;
    }
    #stepbystep .carousel-section .style-list .check-div {
        overflow: visible !important;
        height: 300px !important;
        position: relative !important;
    }
    /* 圖片上的文字標籤：絕對定位在圖片內部底部 */
    #stepbystep .carousel-section .style-list .check-div span {
        position: absolute !important;
        bottom: 12px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 15px !important;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
    /* 圖片下方標題放大 */
    #stepbystep .carousel-section .style-list h2 {
        font-size: 22px !important;
        padding: 12px 8px 6px !important;
        line-height: 1.4 !important;
    }
    #stepbystep .carousel-section .style-list h2 span {
        position: static !important;
        font-size: 18px !important;
        color: #bf4800 !important;
        text-shadow: none !important;
        padding: 0 !important;
    }
    /* 單品改造空間：圖示放大 */
    #dh-section-single .carousel-section-case .item.style-list {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 150px !important;
        padding: 14px 8px !important;
    }
    #dh-section-single .carousel-section-case .item.style-list img {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        margin: 0 auto 8px !important;
    }
    #dh-section-single .carousel-section-case .item.style-list .dh-dhshop-icon-title {
        font-size: 16px !important;
    }
    #dh-section-single .carousel-section-case .item.style-list .dh-dhshop-icon-sub-title {
        font-size: 13px !important;
    }
}

/* ========================================================
   區塊 4：單品改造空間（#dh-section-single）
   ======================================================== */

#dh-section-single .carousel-section-case {
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

#dh-section-single .carousel-section-case .item.style-list {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    border-radius: 12px !important;
}

#dh-section-single .carousel-section-case .item.style-list img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 4px !important;
}

#dh-section-single .carousel-section-case .item.style-list .dh-dhshop-icon-title {
    white-space: nowrap !important;
    overflow: visible !important;
    height: auto !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #1d1d1f !important;
}

#dh-section-single .carousel-section-case .item.style-list .dh-dhshop-icon-sub-title {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #bf4800 !important;
}

/* ========================================================
   區塊 5：探索更多（#dh-section-explore）
   ======================================================== */

#dh-section-explore .carousel-section-case {
    gap: 12px !important;
}

#dh-section-explore .carousel-section-case .style-list {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    box-sizing: border-box !important;
}

#dh-section-explore .carousel-section-case .style-list img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
}

@media (min-width: 768px) {
    #dh-section-explore .carousel-section-case .style-list {
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        flex: 0 0 340px !important;
    }
}

/* ========================================================
   區塊 6：媒體聚光燈（#dh-section-media）
   ======================================================== */

#dh-section-media .carousel-section-case {
    gap: 12px !important;
}

#dh-section-media .carousel-section-case .style-list {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
    box-sizing: border-box !important;
}

#dh-section-media .carousel-section-case .style-list img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (min-width: 768px) {
    #dh-section-media .carousel-section-case .style-list {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
    }
}

/* ========================================================
   區塊 7：Apple 等級文字系統
   設計標準：Apple SF Pro / apple.com 排版層級
   字體層級（繁體中文適用）：
     Title 1  : 28px  weight 600  → 區塊大標題（H2）
     Title 2  : 22px  weight 600  → 子區塊標題（H3）
     Title 3  : 17px  weight 600  → card 標題
     Body     : 14-15px weight 400 → 說明文字
     Footnote : 13px  weight 500  → icon 標題
     Caption  : 11px  weight 400  → icon 副標
   ======================================================== */

/* 全域字體渲染優化 */
body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ── Slogan 第一行：主標 Title 1 ─────────────────────── */
.carousel-consult h2 span:first-child {
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.5 !important;
    color: #1d1d1f !important;
}

/* ── Slogan 第二、三行：副標 Title 2 ─────────────────── */
.carousel-consult h2 span:not(:first-child) {
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    color: #6e6e73 !important;
}

/* ── 各區塊大標題 H2：Title 1 ────────────────────────── */
#stepbystep > h2,
#dh-section-single > h2,
#dh-section-explore > h2,
#dh-section-media > h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    color: #1d1d1f !important;
}

/* 區塊大標題內的橘色 highlight span */
#stepbystep > h2 span,
#dh-section-single > h2 span,
#dh-section-explore > h2 span,
#dh-section-media > h2 span {
    font-size: inherit !important;
    font-weight: 600 !important;
}

/* ── 三張圖子標題（歐巴地板® 地面打造超方便）Title 2 ── */
#stepbystep .carousel-section h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.45 !important;
    color: #1d1d1f !important;
}

/* ── 探索更多 card 標題 Title 3 ──────────────────────── */
#dh-section-explore .carousel-section-case .style-list h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    color: #1d1d1f !important;
    margin: 8px 0 4px !important;
}

/* ── 探索更多 card 說明文字 Body ─────────────────────── */
#dh-section-explore .carousel-section-case .style-list h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    color: #6e6e73 !important;
    margin: 0 0 8px !important;
}

/* ── 媒體聚光燈 card 標題 Title 3 ────────────────────── */
#dh-section-media .carousel-section-case .style-list h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    color: #1d1d1f !important;
    margin: 8px 0 4px !important;
}

/* ── 媒體聚光燈 card 說明文字 Body ──────────────────── */
#dh-section-media .carousel-section-case .style-list h4 {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    color: #6e6e73 !important;
    margin: 0 0 8px !important;
}

/* ── iPad 版本修正 (768px-1024px) ────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 三張圖子標題加大 */
    #stepbystep .carousel-section h2 {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }
    /* 圖片說明文字（已移回圖片內部，用 position:absolute overlay） */
    /* img-caption 樣式已移除，改用 inline style 在 check-div 內部 */
}

/* ========================================================
   區塊 8：商品頁 sticky 面板遮擋修正（20260316）
   
   問題：商品頁右側 sticky 面板（商品名稱+價格+購買按鈕）的
   bottom boundary 設為 #dhshopItem，而 #dhshopItem 包含了
   TinyMCE 編輯器的全部內容（方案卡片、QA accordion、LINE banner）。
   這些內容在 uk-width-1-1 全寬容器內，導致 sticky 面板一直固定
   到頁面底部，遮擋了下方全寬內容的右側部分。
   
   修復策略：
   在桌面版（≥960px，即 sticky 面板出現時），限制 TinyMCE 內容
   區域的寬度，使其不超過 sticky 面板的左邊界。
   手機版保持 100% 全寬（手機版沒有 sticky 面板）。
   
   頁面結構：
   #dhshopItem > [uk-grid] > .uk-width-1-1 > .uk-margin
   └── .mainboard（方案標題區）
   └── #QA（QA 標題）
   └── .accordion（QA 手風琴）
   └── LINE banner 圖片
   ======================================================== */

/* sticky 面板已全面隱藏（區塊 11），內容可使用 100% 寬度 */
#dhshopItem .uk-width-1-1 > .uk-margin {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* mainboard 容器（方案標題+卡片）：覆蓋 inline max-width */
#dhshopItem .mainboard {
    max-width: 100% !important;
}

/* QA accordion：覆蓋 inline width:100% */
#dhshopItem .accordion {
    width: 100% !important;
}

/* QA accordion details：調整 margin */
#dhshopItem .accordion details {
    margin-left: 10px !important;
    margin-right: 10px !important;
    box-sizing: border-box !important;
}

/* LINE 客服 banner 圖片 */
#dhshopItem .uk-width-1-1 > .uk-margin img.img-responsive {
    max-width: 100% !important;
}

/* ========================================================
   區塊 9：歐巴地板案例圖片橫向滑動 carousel（20260316）
   
   問題：三張改造案例大圖（孩子/毛孩空間、臥室改造、客廳改造）
   在手機/平板上以全寬堆疊顯示，佔據大量垂直空間，且使用者
   無法一目了然有多個案例可以參考。
   
   修復策略：
   將 .case-carousel__track 改為 flex 橫向排列 + overflow-x 滑動，
   每張圖片佔 85% 視窗寬度（手機）/ 75%（平板），讓右側露出
   下一張圖片的邊緣，暗示使用者可以左右滑動查看更多。
   桌面版也改為橫向滑動以保持一致體驗。
   
   HTML 結構：
   .case-carousel > .case-carousel__track > .case-carousel__item (figure) > img
   ======================================================== */

/* === carousel 容器 === */
.case-carousel {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* === 滑動軌道 === */
.case-carousel__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 4% 16px !important;
    box-sizing: border-box !important;
}

.case-carousel__track::-webkit-scrollbar {
    display: none !important;
}

/* === 每張圖片項目 === */
.case-carousel__item {
    flex: 0 0 85% !important;
    width: 85% !important;
    min-width: 85% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease !important;
}

.case-carousel__item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* === 平板版（768px-1024px）=== */
@media (min-width: 768px) and (max-width: 1024px) {
    .case-carousel__item {
        flex: 0 0 75% !important;
        width: 75% !important;
        min-width: 75% !important;
    }

    .case-carousel__track {
        gap: 16px !important;
        padding: 0 4% 20px !important;
    }
}

/* === 桌面版（≥1025px）=== */
@media (min-width: 1025px) {
    .case-carousel__item {
        flex: 0 0 65% !important;
        width: 65% !important;
        min-width: 65% !important;
        border-radius: 20px !important;
    }

    .case-carousel__track {
        gap: 20px !important;
        padding: 0 4% 24px !important;
    }
}

/* === 隔斷元素：確保 carousel 不影響後續區塊 === */
.case-carousel-break {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* === obafloor-case-scope 容器：確保不溢出 === */
.obafloor-case-scope {
    overflow: hidden !important;
    width: 100% !important;
}

/* ========================================================
   區塊 10：歐巴地板 6 張特色圖片 2x3 grid 排列（20260316）
   
   問題：6 張特色圖片（輕鬆DIY、免膠免釘、專利防滑、紮實厚度、
   耐磨耐刮、防潮抗水）使用 Bootstrap col-xs-4（33.3% 寬度），
   在手機上 3 張一排圖片太小看不清楚。
   
   修復策略：
   在手機/平板上將 col-xs-4 改為 50% 寬度，每兩張一排、共 3 排。
   
   HTML 結構：
   .col-lg-12.col-sm-12.mt-4 > .col-xs-4[style*="padding: 10px"] (x6)
   
   定位方式：使用 img[alt*="歐巴地板"] 的父容器來精確定位
   ======================================================== */

/* 手機和平板版（≤1024px）：6 張特色圖片改為 2x3 grid */
@media (max-width: 1024px) {
    /* 父容器：包含 6 個 col-xs-4 的 div */
    .col-lg-12.col-sm-12.mt-4 > .col-xs-4[style*="padding: 10px"] {
        width: 50% !important;
        float: left !important;
        box-sizing: border-box !important;
    }
    
    /* 確保圖片在容器內自適應 */
    .col-lg-12.col-sm-12.mt-4 > .col-xs-4[style*="padding: 10px"] img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 12px !important;
    }
}

/* ========================================================
   區塊 11：商品頁 sticky 購買面板隱藏（20260316）
   
   問題：右上角 sticky 商品資訊面板（商品名、價格、數量、購買按鈕）
   在手機/平板上佔據大量版面，遮擋內容。
   
   修復策略：
   在手機/平板（≤1024px）上隱藏 sticky 面板。
   頁面底部已有固定的「直接購買 + 加入購物車」按鈕列，
   使用者仍可正常購買。
   
   HTML 結構：
   .dh-item-group-info-sticky[uk-sticky] (line 1227-1228)
   ======================================================== */

/* 所有裝置（含桌機）都隱藏 sticky 購物面板 */
.dh-item-group-info-sticky {
    display: none !important;
}


/* ========================================================
   區塊 12：案例選擇區塊 Apple 級重新設計
   - 3 個 pill tabs（有小孩、有寵物、小宅／租屋）
   - 隱藏 DIY 自己鋪、一般家庭
   - CSS-only radio hack 切換面板
   - 每個面板內圖片橫向滑動 carousel
   - Apple 風格：大圓角、柔和漸變、微動畫
   ======================================================== */

/* --- 12.1 Section 容器 --- */
.case-section {
    padding: 48px 0 32px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* --- 12.2 標題 --- */
.case-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #1d1d1f !important;
    text-align: center !important;
    margin: 0 0 8px !important;
    padding: 0 20px !important;
    line-height: 1.2 !important;
}
.case-subtitle {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #86868b !important;
    text-align: center !important;
    margin: 0 0 28px !important;
    padding: 0 20px !important;
    line-height: 1.5 !important;
}

/* --- 12.3 隱藏原生 radio --- */
.case-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* --- 12.4 Pill Tabs 容器 --- */
.case-acc {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 20px 32px !important;
    position: relative !important;
}

/* --- 12.5 Pill Tab 按鈕 --- */
.case-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    background: transparent !important;
    border: none !important;
    border-radius: 980px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    position: relative !important;
    z-index: 1 !important;
    letter-spacing: -0.01em !important;
}
.case-tab:hover {
    color: #1d1d1f !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Active tab (checked radio + adjacent label) */
#cat-kids:checked ~ .case-panels,
#cat-kids:checked + .case-tab,
#cat-pets:checked + .case-tab,
#cat-rent:checked + .case-tab {
    /* placeholder for specificity */
}

.case-radio:checked + .case-tab {
    color: #fff !important;
    background: linear-gradient(135deg, #efac92 0%, #e8967a 100%) !important;
    box-shadow: 0 2px 12px rgba(239, 172, 146, 0.4) !important;
    font-weight: 600 !important;
    transform: scale(1.02) !important;
}

/* --- 12.6 隱藏 DIY 和一般家庭 tabs --- */
#cat-diy,
#cat-diy + .case-tab,
#cat-family,
#cat-family + .case-tab {
    display: none !important;
}

/* --- 12.7 面板容器 --- */
.case-panels {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* --- 12.8 所有面板預設隱藏 --- */
.case-panel {
    display: none !important;
    width: 100% !important;
    animation: caseFadeIn 0.4s ease-out !important;
}

/* --- 12.9 Radio hack 顯示對應面板 --- */
#cat-kids:checked ~ .case-panels .case-panel--kids,
#cat-pets:checked ~ .case-panels .case-panel--pets,
#cat-rent:checked ~ .case-panels .case-panel--rent {
    display: block !important;
}

/* 隱藏 DIY 和一般家庭面板 */
.case-panel--diy,
.case-panel--family {
    display: none !important;
}

/* --- 12.10 淡入動畫 --- */
@keyframes caseFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 12.11 Scroll 容器（橫向滑動） --- */
.case-scroll {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding: 16px 20px 20px !important;
    box-sizing: border-box !important;
}
.case-scroll::-webkit-scrollbar {
    display: none !important;
}

/* --- 12.12 圖片卡片 --- */
.case-scroll img {
    flex: 0 0 82% !important;
    width: 82% !important;
    min-width: 82% !important;
    height: auto !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- 12.13 滑動提示指示器 --- */
.case-scroll::after {
    content: '' !important;
    flex: 0 0 8px !important;
    min-width: 8px !important;
}

/* --- 12.14 Dot 指示器（用 scroll 位置暗示） --- */
.case-panel::after {
    content: '← 左右滑動查看更多案例 →' !important;
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #86868b !important;
    padding: 4px 0 8px !important;
    letter-spacing: 0.5px !important;
    animation: hintPulse 2s ease-in-out infinite !important;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ---- 12.15 平板適配 (768-1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
    .case-title {
        font-size: 32px !important;
    }
    .case-subtitle {
        font-size: 16px !important;
        margin-bottom: 32px !important;
    }
    .case-tab {
        padding: 12px 32px !important;
        font-size: 16px !important;
    }
    .case-scroll img {
        flex: 0 0 70% !important;
        width: 70% !important;
        min-width: 70% !important;
        border-radius: 24px !important;
    }
    .case-scroll {
        gap: 16px !important;
        padding: 0 24px 24px !important;
    }
}

/* ---- 12.16 桌面適配 (≥1025px) ---- */
@media (min-width: 1025px) {
    .case-section {
        padding: 64px 0 48px !important;
    }
    .case-title {
        font-size: 40px !important;
    }
    .case-subtitle {
        font-size: 18px !important;
        margin-bottom: 40px !important;
    }
    .case-tab {
        padding: 14px 40px !important;
        font-size: 17px !important;
    }
    .case-scroll img {
        flex: 0 0 55% !important;
        width: 55% !important;
        min-width: 55% !important;
        border-radius: 28px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    }
    .case-scroll {
        gap: 24px !important;
        padding: 0 5% 32px !important;
    }
    .case-panel::after {
        font-size: 13px !important;
        padding: 8px 0 12px !important;
    }
}

/* ========================================================
   區塊 13：商品頁 Apple 級 Typography System（20260316-v2）
   
   全面重寫：修正選擇器覆蓋範圍，確保 H1.sale-title 和 SPAN 標題
   都被正確覆蓋。建立完整的文字層級系統。
   
   設計原則（Apple Design Guidelines）：
   - 清晰的文字層級（Typographic Hierarchy）
   - 系統原生字體堆疊（Font Stack）
   - 舒適的行距（line-height 1.65-1.75）和字間距
   - 充足的段落間距營造呼吸感
   - 使用 !important 覆蓋 inline style
   - 後台 TinyMCE 編輯不受影響
   
   Typography Scale：
   Desktop → Tablet → Mobile
   - Section Title: 28px → 26px → 22px, weight 700, #e8967a
   - Body:          17px → 16px → 15px, weight 400, #1d1d1f
   - Quote:         16px → 15px → 14px, weight 400, #6e6e73
   - Caption:       14px → 13px → 12px, weight 400, #86868b
   ======================================================== */

/* --- 13.0 全局字體堆疊與渲染優化 --- */
#dhshopItem {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC",
                 "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* --- 13.1 Section Titles (H1.sale-title + SPAN 36px) --- */
/* H1.sale-title 標題（inline style: font-size:36px, font-weight:600, color:#efac92） */
#dhshopItem h1.sale-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    color: #e8967a !important;
    margin: 0 0 8px !important;
}

/* SPAN 標題（inline style: font-size:36px, color:#efac92） */
#dhshopItem span[style*="font-size: 36px"] {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    color: #e8967a !important;
}

/* H1 內的 strong：取消雙重加粗效果 */
#dhshopItem h1.sale-title strong {
    font-weight: 700 !important;
}

/* SPAN 標題內的 strong */
#dhshopItem span[style*="font-size: 36px"] strong {
    font-weight: 700 !important;
}

/* --- 13.2 Subtitle Text (SPAN.sale-title 21px + weight 300) --- */
#dhshopItem span.sale-title[style*="font-size: 21px"] {
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.01em !important;
    color: #424245 !important;
}

/* --- 13.3 Body Text (SPAN 21px) --- */
#dhshopItem span[style*="font-size: 21px"] {
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.015em !important;
    color: #1d1d1f !important;
}

/* 過輕字重修正 (weight 300 → 400) */
#dhshopItem span[style*="font-weight: 300"] {
    font-weight: 400 !important;
}

/* --- 13.4 Body Text 內的粗體強調 --- */
#dhshopItem span[style*="font-size: 21px"] strong {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

#dhshopItem strong span[style*="font-size: 21px"] {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

/* --- 13.5 Caption / Small Text --- */
#dhshopItem span[style*="font-size: 15px"] {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #86868b !important;
}

/* --- 13.6 BOXsale-title 容器優化 --- */
#dhshopItem .BOXsale-title {
    letter-spacing: 0.01em !important;
}

/* 第一個 BOXsale-title (i101-title) 的 padding 優化 */
#dhshopItem .BOXsale-title.i101-title {
    padding-top: 2.5em !important;
    padding-bottom: 1em !important;
}

/* 其他 BOXsale-title 的 padding */
#dhshopItem .BOXsale-title:not(.i101-title) {
    padding-top: 2em !important;
    padding-bottom: 0.8em !important;
}

/* --- 13.7 embed-responsive 文字容器 --- */
#dhshopItem .embed-responsive-16by9[style*="padding-bottom: 0px"] {
    margin-bottom: 12px !important;
}

/* --- 13.8 段落間距統一 --- */
#dhshopItem .flex-grow-6 .col-lg-12 p,
#dhshopItem .flex-grow-6 .col-sm-12 p {
    margin-bottom: 0.4em !important;
    line-height: 1.75 !important;
}

/* 文字區塊容器的上下間距 */
#dhshopItem .flex-grow-6 > .col-lg-12.col-sm-12 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* 有 mt-4 class 的區塊保持較大間距 */
#dhshopItem .flex-grow-6 > .col-lg-12.col-sm-12.mt-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* --- 13.9 方案卡片區域 --- */
/* 方案區副標題 */
#dhshopItem div[style*="font-size: 20px"] {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #424245 !important;
    letter-spacing: 0.01em !important;
}

/* 方案名稱 */
#dhshopItem div[style*="font-size: 16px"][style*="font-weight: 800"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

/* 方案描述 */
#dhshopItem div[style*="font-size: 13px"][style*="color: #444"],
#dhshopItem div[style*="font-size: 13px"][style*="color: rgb(68, 68, 68)"] {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #424245 !important;
}

/* 活動條款 */
#dhshopItem div[style*="font-size: 13px"][style*="color: #666"],
#dhshopItem div[style*="font-size: 13px"][style*="color: rgb(102, 102, 102)"] {
    font-size: 12px !important;
    color: #86868b !important;
    line-height: 1.5 !important;
}

/* --- 13.10 QA 區域 --- */
/* QA 標題 */
#dhshopItem .accordion summary {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    color: #1d1d1f !important;
}

/* QA 回答文字 */
#dhshopItem .accordion p[style*="font-size: 17px"],
#dhshopItem p[style*="font-size: 17px"] {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #424245 !important;
    letter-spacing: 0.01em !important;
}

/* --- 13.11 H3 標題（案例區等） --- */
#dhshopItem .flex-grow-6 h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
}

/* --- 13.12 obafloor-case-scope 內的文字 --- */
/* portable section 容器字體 */
#dhshopItem .obafloor-case-scope div[style*="font-size: 18px"] {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

/* portable section 內的標題 SPAN */
#dhshopItem .obafloor-case-scope span[style*="font-size: 36px"] {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    color: #e8967a !important;
}

/* portable section 內的內文 SPAN */
#dhshopItem .obafloor-case-scope span[style*="font-size: 21px"] {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.015em !important;
    color: #1d1d1f !important;
}

/* portable section 內的粗體 */
#dhshopItem .obafloor-case-scope span[style*="font-size: 21px"] strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

/* --- 13.13 圖片間距優化 --- */
#dhshopItem .flex-grow-6 .col-lg-12 img:not([class]) {
    margin-bottom: 4px !important;
}

/* 確保 text-align: center 的段落有適當間距 */
#dhshopItem p[style*="text-align: center"],
#dhshopItem p[style*="text-align:center"] {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* --- 13.16 六圖並排區塊佈局修正 (col-xs-4) --- */
/* Bootstrap 3 的 col-xs-4 在 BS4/5 中無效，需手動補回 grid 佈局 */
#dhshopItem .col-lg-12.col-sm-12.mt-4:has(> .col-xs-4) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

#dhshopItem .col-xs-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

#dhshopItem .col-xs-4 img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
}

/* --- 13.14 Mobile 響應式 (<768px) --- */
@media (max-width: 767px) {
    /* Section Title mobile — 放大版 */
    #dhshopItem h1.sale-title {
        font-size: 24px !important;
        line-height: 1.35 !important;
        margin: 0 0 6px !important;
    }
    
    #dhshopItem span[style*="font-size: 36px"] {
        font-size: 24px !important;
        line-height: 1.35 !important;
    }
    
    #dhshopItem .obafloor-case-scope span[style*="font-size: 36px"] {
        font-size: 23px !important;
    }
    
    /* Subtitle mobile — 放大版 */
    #dhshopItem span.sale-title[style*="font-size: 21px"] {
        font-size: 16px !important;
    }
    
    /* Body mobile — 放大版 */
    #dhshopItem span[style*="font-size: 21px"] {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    #dhshopItem .obafloor-case-scope span[style*="font-size: 21px"] {
        font-size: 16px !important;
    }
    
    /* Body bold mobile — 放大版 */
    #dhshopItem span[style*="font-size: 21px"] strong,
    #dhshopItem strong span[style*="font-size: 21px"] {
        font-size: 16px !important;
    }
    
    /* Caption mobile — 放大版 */
    #dhshopItem span[style*="font-size: 15px"] {
        font-size: 13px !important;
    }
    
    /* 段落間距 mobile */
    #dhshopItem .flex-grow-6 > .col-lg-12.col-sm-12 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    #dhshopItem .flex-grow-6 > .col-lg-12.col-sm-12.mt-4 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    /* BOXsale-title mobile */
    #dhshopItem .BOXsale-title.i101-title {
        padding-top: 1.8em !important;
        padding-bottom: 0.6em !important;
    }
    
    #dhshopItem .BOXsale-title:not(.i101-title) {
        padding-top: 1.5em !important;
        padding-bottom: 0.5em !important;
    }
    
    /* 方案副標題 mobile — 放大版 */
    #dhshopItem div[style*="font-size: 20px"] {
        font-size: 16px !important;
    }
    
    /* QA mobile — 放大版 */
    #dhshopItem .accordion p[style*="font-size: 17px"],
    #dhshopItem p[style*="font-size: 17px"] {
        font-size: 15px !important;
    }
    
    #dhshopItem .accordion summary {
        font-size: 16px !important;
    }
    
    /* H3 mobile — 放大版 */
    #dhshopItem .flex-grow-6 h3 {
        font-size: 22px !important;
    }
    
    /* portable section mobile — 放大版 */
    #dhshopItem .obafloor-case-scope div[style*="font-size: 18px"] {
        font-size: 16px !important;
    }
    
    /* 六圖並排 mobile: 2 欄 */
    #dhshopItem .col-xs-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* --- 13.15 Tablet 響應式 (768px-1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Section Title tablet — 放大版 */
    #dhshopItem h1.sale-title {
        font-size: 27px !important;
    }
    
    #dhshopItem span[style*="font-size: 36px"] {
        font-size: 27px !important;
    }
    
    #dhshopItem .obafloor-case-scope span[style*="font-size: 36px"] {
        font-size: 25px !important;
    }
    
    /* Subtitle tablet — 放大版 */
    #dhshopItem span.sale-title[style*="font-size: 21px"] {
        font-size: 17px !important;
    }
    
    /* Body tablet — 放大版 */
    #dhshopItem span[style*="font-size: 21px"] {
        font-size: 17px !important;
    }
    
    #dhshopItem .obafloor-case-scope span[style*="font-size: 21px"] {
        font-size: 17px !important;
    }
    
    /* Body bold tablet — 放大版 */
    #dhshopItem span[style*="font-size: 21px"] strong,
    #dhshopItem strong span[style*="font-size: 21px"] {
        font-size: 17px !important;
    }
    
    /* H3 tablet — 放大版 */
    #dhshopItem .flex-grow-6 h3 {
        font-size: 23px !important;
    }
    
    /* QA tablet — 放大版 */
    #dhshopItem .accordion p[style*="font-size: 17px"],
    #dhshopItem p[style*="font-size: 17px"] {
        font-size: 16px !important;
    }
    
    #dhshopItem .accordion summary {
        font-size: 17px !important;
    }
    
    /* 方案副標題 tablet — 放大版 */
    #dhshopItem div[style*="font-size: 20px"] {
        font-size: 17px !important;
    }
    
    /* portable section tablet — 放大版 */
    #dhshopItem .obafloor-case-scope div[style*="font-size: 18px"] {
        font-size: 17px !important;
    }
}

/* ====================================================================
 * 區塊 14：隱藏「我家需要多少」浮動按鈕
 * 目標：移除右下角的黃色圓形浮動按鈕（桌機/平板/手機全部隱藏）
 * 選擇器：#oppa-calc-btn
 * ==================================================================== */

/* 14.1 隱藏浮動計算按鈕 — 所有裝置 */
#oppa-calc-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ====================================================================
 * 區塊 15：案例區塊 Pinterest 瀑布流排版
 * 目標：將「隨意探索 愜意生活」下方的案例卡片改為 Pinterest 風格瀑布流
 * 選擇器：#conceptList / .dh-concept-list / .dh-graphic
 * 關鍵：必須覆蓋 UIkit masonry JS 設定的 inline height + transform
 * ==================================================================== */

/* 15.1 容器：使用 CSS columns + 覆蓋 UIkit JS 的 inline height */
#conceptList.dh-concept-list {
    display: block !important;
    columns: 4 !important;
    column-gap: 16px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    list-style: none !important;
    max-width: 1600px !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: unset !important;
}

/* 15.2 覆蓋 UIkit grid 偽元素 */
#conceptList.dh-concept-list::before,
#conceptList.dh-concept-list::after {
    display: none !important;
}

/* 15.3 每張卡片：覆蓋 UIkit JS inline transform + 瀑布流排列 */
#conceptList.dh-concept-list > li {
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
    transform: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    transition: box-shadow 0.25s ease !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 15.4 卡片 hover 效果 */
#conceptList.dh-concept-list > li:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}

/* 15.5 連結填滿卡片 */
#conceptList.dh-concept-list > li > a {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* 15.6 圖片容器 */
#conceptList.dh-concept-list .dh-graphic {
    position: relative !important;
    overflow: hidden !important;
}

/* 15.7 圖片：自適應高度（瀑布流關鍵） */
#conceptList.dh-concept-list .dh-graphic img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}

/* 15.8 圖片 hover 微放大 */
#conceptList.dh-concept-list > li:hover .dh-graphic img {
    transform: scale(1.03) !important;
}

/* 15.9 標題文字 */
#conceptList.dh-concept-list .dh-graphic > div {
    padding: 10px 14px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* 15.10 響應式：平板 3 欄 */
@media (max-width: 1200px) {
    #conceptList.dh-concept-list {
        columns: 3 !important;
    }
}

/* 15.11 響應式：小平板 2 欄 */
@media (max-width: 768px) {
    #conceptList.dh-concept-list {
        columns: 2 !important;
        column-gap: 12px !important;
        padding: 0 12px !important;
    }
    #conceptList.dh-concept-list > li {
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }
    #conceptList.dh-concept-list .dh-graphic > div {
        font-size: 13px !important;
        padding: 8px 10px 12px !important;
    }
}

/* 15.12 響應式：手機 2 欄 */
@media (max-width: 480px) {
    #conceptList.dh-concept-list {
        columns: 2 !important;
        column-gap: 10px !important;
        padding: 0 10px !important;
    }
    #conceptList.dh-concept-list > li {
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }
    #conceptList.dh-concept-list .dh-graphic > div {
        font-size: 12px !important;
        padding: 6px 8px 10px !important;
    }
}