@charset "utf-8";
/* 前台 CKEditor 內容 — 舊站樣式相容層（legacy-content.css）
 *
 * 舊站商品內文（由 LegacyProductImportSeeder 匯入）大量引用兩支舊站全域 CSS 的 class，
 * 但新站前台並未載入該兩支檔案，導致文字排版與舊站不一致。本檔為其相容層：
 *   1) 舊站 /archive/products/item/CSS/enermax_pc.css 全文
 *      （80 PLUS 徽章標題、RGB LOGO 排版、表格垂直置中、圖文上下置中等商品內容輔助樣式）
 *   2) 舊站 contentbuilder content-bootstrap.css 中「舊內文實際有使用」的規則節錄
 *      （.basic-table 表格、.embed-responsive 影片容器、.center、.size-* / .is-* 標題字級）
 *
 * 所有規則一律以 .ckeditor-block-view 前綴限定範圍，僅作用於 CKEditor 內容區塊，
 * 避免 .center / .embed-responsive 等通用命名污染新站其他版面。
 * 由 front layout 於 ckeditor_view.css 之後載入。
 */

/* ============================================================
   1) enermax_pc.css（舊站商品內容輔助樣式）
   ============================================================ */

/* 表格垂直置中 */
.ckeditor-block-view .table td,
.ckeditor-block-view .table th {
    vertical-align: middle;
}

/* RGB LOGO 排版 */
.ckeditor-block-view .rgb_wrap {
    width: 100%;
    max-width: 725px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}
.ckeditor-block-view .rgb_wrap_2 {
    width: 100%;
    max-width: 618px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}
.ckeditor-block-view .rgb_left,
.ckeditor-block-view .rgb_right {
    float: left;
}
.ckeditor-block-view .rgb_wrap img {
    float: left;
    margin-right: 20px;
}
.ckeditor-block-view .rgb_wrap_2 img {
    float: left;
    margin-right: 20px;
}
.ckeditor-block-view .rgb_logo_last img {
    margin-right: 0;
}
@media screen and (max-width: 992px) {
    .ckeditor-block-view .rgb_wrap {
        width: 100%;
    }
    .ckeditor-block-view .rgb_wrap img {
        float: left;
        margin-right: 11px;
    }
    .ckeditor-block-view .rgb_wrap_2 img {
        float: left;
        margin-right: 11px;
    }
}
@media screen and (max-width: 768px) {
    .ckeditor-block-view .rgb_left,
    .ckeditor-block-view .rgb_right {
        float: none;
    }
    .ckeditor-block-view .rgb_wrap {
        text-align: center;
    }
    .ckeditor-block-view .rgb_wrap_2 {
        text-align: center;
    }
    .ckeditor-block-view .pc_h3_top {
        margin-top: 1rem;
    }
}

/* 圖文上下置中 */
.ckeditor-block-view .pc_word_center {
    align-items: center;
    display: -webkit-flex;
    display: flex;
}
@media screen and (max-width: 768px) {
    .ckeditor-block-view .pc_word_center {
        align-items: center;
        display: block;
    }
}

/* PSU 80 PLUS 認證徽章標題（銅 / 銀 / 金 / 白金 / 鈦金） */
.ckeditor-block-view .h1_BRONZE {
    color: #9e5f14;
    font-weight: 700;
    text-transform: uppercase;
}
.ckeditor-block-view .h1_line_BRONZE {
    display: block;
    width: 70px;
    height: 2px;
    background: #9e5f14;
    margin: 0 auto 45px;
}
.ckeditor-block-view .h1_line_BRONZE_L {
    display: block;
    width: 70px;
    height: 2px;
    background: #9e5f14;
    margin-bottom: 45px;
}
.ckeditor-block-view .h1_SILVER {
    color: #a5acb0;
    font-weight: 700;
    text-transform: uppercase;
}
.ckeditor-block-view .h1_line_SILVER {
    display: block;
    width: 70px;
    height: 2px;
    background: #a5acb0;
    margin: 0 auto 45px;
}
.ckeditor-block-view .h1_line_SILVER_L {
    display: block;
    width: 70px;
    height: 2px;
    background: #a5acb0;
    margin-bottom: 45px;
}
.ckeditor-block-view .h1_GOLD {
    color: #f3bc47;
    font-weight: 700;
    text-transform: uppercase;
}
.ckeditor-block-view .h1_line_GOLD {
    display: block;
    width: 70px;
    height: 2px;
    background: #f3bc47;
    margin: 0 auto 45px;
}
.ckeditor-block-view .h1_line_GOLD_L {
    display: block;
    width: 70px;
    height: 2px;
    background: #f3bc47;
    margin-bottom: 45px;
}
.ckeditor-block-view .h1_PLATINUM {
    background: -webkit-linear-gradient(top, #ffffff 30%, #b6b6b6 45%, #ffffff 66%, #eaeaea 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase;
}
.ckeditor-block-view .h1_line_PLATINUM {
    display: block;
    width: 70px;
    height: 2px;
    background: -webkit-linear-gradient(top, #ffffff 30%, #b6b6b6 45%, #ffffff 66%, #eaeaea 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 auto 45px;
}
.ckeditor-block-view .h1_line_PLATINUM_L {
    display: block;
    width: 70px;
    height: 2px;
    background: -webkit-linear-gradient(top, #ffffff 30%, #b6b6b6 45%, #ffffff 66%, #eaeaea 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 45px;
}
.ckeditor-block-view .h1_TITANIUM {
    background: -webkit-linear-gradient(top, #676767 20%, #e8e8e8 50%, #afafaf 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase;
}
.ckeditor-block-view .h1_line_TITANIUM {
    display: block;
    width: 70px;
    height: 2px;
    background: -webkit-linear-gradient(top, #676767 20%, #e8e8e8 50%, #afafaf 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 auto 45px;
}
.ckeditor-block-view .h1_line_TITANIUM_L {
    display: block;
    width: 70px;
    height: 2px;
    background: -webkit-linear-gradient(top, #676767 20%, #e8e8e8 50%, #afafaf 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 45px;
}
@media screen and (max-width: 769px) {
    .ckeditor-block-view .h1_BRONZE,
    .ckeditor-block-view .h1_SILVER,
    .ckeditor-block-view .h1_GOLD,
    .ckeditor-block-view .h1_PLATINUM,
    .ckeditor-block-view .h1_TITANIUM {
        text-align: center;
    }
    .ckeditor-block-view .h1_line_BRONZE_L,
    .ckeditor-block-view .h1_line_SILVER_L,
    .ckeditor-block-view .h1_line_GOLD_L,
    .ckeditor-block-view .h1_line_PLATINUM_L,
    .ckeditor-block-view .h1_line_TITANIUM_L {
        margin: 0 auto 45px;
    }
}

/* ============================================================
   2) content-bootstrap.css 節錄（舊內文有使用的規則）
   ============================================================ */

/* 置中 helper */
.ckeditor-block-view .center {
    text-align: center;
}
@media all and (max-width: 540px) {
    .ckeditor-block-view .center {
        text-align: initial;
    }
}

/* 響應式影片容器（Bootstrap 4 語法，BS5 已移除） */
.ckeditor-block-view .embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 1.4em;
    margin-bottom: 1em;
}
.ckeditor-block-view .embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.ckeditor-block-view .embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%;
}
.ckeditor-block-view .embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 標題字級 helper */
.ckeditor-block-view .size-21 {
    font-size: 21px;
}
.ckeditor-block-view .size-48 {
    font-size: 48px;
}
@media all and (max-width: 1024px) {
    .ckeditor-block-view .size-21 {
        font-size: 21px;
    }
    .ckeditor-block-view .size-48 {
        font-size: 32px;
    }
}
.ckeditor-block-view .is-title1-48 {
    margin-top: 15px;
    margin-bottom: 15px;
}
.ckeditor-block-view .is-title-bold {
    font-weight: 800;
}
.ckeditor-block-view .is-upper {
    text-transform: uppercase;
}

/* 基本表格 */
.ckeditor-block-view .basic-table .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f6f6f6;
}
.ckeditor-block-view .basic-table table tbody tr td {
    padding: 10px;
}
.ckeditor-block-view .basic-table table tbody tr td:first-child {
    font-weight: 600;
}

/* ============================================================
   3) 溢出防護（2026-07-28 起，對應舊站 style.css 的全域規則）
   ============================================================
   舊站 style.css 有 body { overflow-x: hidden } 與
   embed, iframe, object, video { max-width: 100% } 兩條全域規則，
   把舊內文的橫向溢出（bare .row 負 margin、1920px 原始寬度影片等）壓住。
   新站已移除該未 scope 的全域檔（會弄壞 Header），故在此以
   .ckeditor-block-view 範圍等效補回，避免內容頁出現橫向捲軸。 */

/* 影片 / iframe / 內嵌物件不得超出容器（舊站 style.css:1032） */
.ckeditor-block-view video,
.ckeditor-block-view iframe,
.ckeditor-block-view embed,
.ckeditor-block-view object {
    max-width: 100%;
}

/* 舊內文常見 bare .row（未包在 .container 內）的 ±12px 負 margin 溢出，
   舊站靠 body overflow-x hidden 裁掉；此處改在內容區塊裁切（clip 不影響
   overflow-y，舊瀏覽器 fallback hidden）（舊站 style.css:132） */
.ckeditor-block-view {
    overflow-x: hidden;
    overflow-x: clip;
}