@charset "UTF-8";
/* ==========================================================================
   GCB（神省團購 / 限時搶購）
   對應 Figma：兌換平台 > 活動頁v2 (node 4712:4176) 的 main 區塊
   斷點沿用 /_common/reward/v2/_css 的設定：
   xl 1200px / lg 992px / md 768px / sm 576px
   ========================================================================== */

:root {
    --GCB-red: #d80c18;
    --GCB-red-dark: #aa000a;
    --GCB-btn: #e60012;
    --GCB-point: #d80c18;
    --GCB-limit: #d60011;
    --GCB-badge-bg: #ffe3e3;
    --GCB-head-wait: #434343;
    --GCB-card-radius: 6px;
    --GCB-thumb: 232px;
    --GCB-gap: 23px;
    --GCB-note-bg: #fdf1f2;
}

/* --------------------------------------------------------------------------
   區塊外框
   -------------------------------------------------------------------------- */
.promotion-section {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 24px 24px;
    margin-bottom: 32px;
    text-align: left;
}

.promotion-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .promotion-section {
        padding: 0 12px 16px;
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   區塊標題（滿版，需超出左右 padding）
   -------------------------------------------------------------------------- */
.promotion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    /* 抵銷 .promotion-section 的左右 padding，做出滿版效果 */
    margin: 0 -24px 27px;
    padding: 13px 28px;
    min-height: 63px;
    background-color: var(--GCB-head-wait);
    color: #fff;
    overflow: hidden;
}

/* 開賣中：紅色漸層 + 倒數。漸層加寬並緩慢流動，讓區塊更顯眼 */
.promotion-section.is-onsale .promotion-head {
    background-image: linear-gradient(100deg,
            var(--GCB-red) 0%,
            var(--GCB-red-dark) 45%,
            var(--GCB-red) 100%);
    background-size: 220% 100%;
    background-position: 0% 0%;
    animation: GCB-head-flow 12s linear infinite;
    padding: 26px 28px;
    min-height: 123px;
}

@keyframes GCB-head-flow {
    to {
        background-position: -200% 0%;
    }
}

.promotion-head__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.promotion-head__tit {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.86px;
    color: #fff;
}

/* 標題與加碼標籤同一行（兩個樣板共用；沒有 badge 時等同原本只有標題） */
.promotion-head__titrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

/* 檔期加碼標籤（例：下單加碼100點）
   文案來自 PROMOTION_NOTES[endTime].badge，隨檔期自動出現／消失。
   白框白字，紅底（開賣中）與灰底（未開賣／已結束）兩種 head 都適用 */
.promotion-head__badge {
    /* inline-flex + align-items:center 讓文字在膠囊內垂直置中。
       不能用 inline-block + line-height 撐高度：中文沒有下伸部，
       半行距平均分配後字身會偏上，看起來下方留白較多。
       改成 line-height:1（內容區＝em 框）、高度全部交給對稱的 padding，
       上下留白才會一致。總高 16 + 8*2 + 1*2 = 34px，與原本相同 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #fff;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    /* 視覺微調：標題是 32px 中文字，字身在行框內偏上，單靠 align-items:center
       對齊「盒子」會讓膠囊看起來偏高。此值為實際畫面上目視調校的結果。
       注意 flex 置中的是「外距框」，所以實際位移量不等於 5px，
       會隨膠囊與標題誰比較高而變；改動前請在實際頁面上重看，勿只憑數值推算 */
    margin-top: 5px;
}

/* 首頁版標題上方的小字（折扣倒數中） */
.promotion-head__sub {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
    color: #fff;
}

.promotion-section.is-onsale .promotion-head__tit {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: normal;
}

@media (max-width: 991px) {
    .promotion-head {
        margin-left: -24px;
        margin-right: -24px;
        margin-bottom: 20px;
        padding: 12px 20px;
        min-height: 0;
    }

    .promotion-section.is-onsale .promotion-head {
        min-height: 0;
        padding: 18px 20px;
    }

    .promotion-section.is-onsale .promotion-head__tit {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .promotion-head {
        margin-left: -12px;
        margin-right: -12px;
        margin-bottom: 16px;
        padding: 14px 16px;
    }

    .promotion-section.is-onsale .promotion-head {
        padding: 14px 16px;
    }

    .promotion-head__tit {
        font-size: 17px;
    }

    .promotion-section.is-onsale .promotion-head__tit {
        font-size: 20px;
    }

    .promotion-head__sub {
        font-size: 13px;
        letter-spacing: 0;
    }

    .promotion-head__titrow {
        gap: 8px;
    }

    .promotion-head__badge {
        /* 同上，高度由 padding 控制：13 + 6*2 + 1*2 = 27px */
        padding: 6px 10px;
        font-size: 13px;
        /* 手機版不需要桌機那個 5px 微調：標題從 32px 縮到 20px、膠囊也縮到 13px，
           兩者高度差變小，單純 align-items:center 目視就已經對齊 */
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   首頁（index.aspx）精選區塊：卡片下方多一顆「更多優惠」
   -------------------------------------------------------------------------- */
.promotion-section--index {
    margin-bottom: 0;
}

.promotion-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 339px;
    max-width: 100%;
    margin: 27px auto 0;
    padding: 9px 48px;
    border: 1px solid var(--GCB-limit);
    border-radius: var(--GCB-card-radius);
    background-color: #fff;
    color: var(--GCB-limit);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.promotion-more:hover,
.promotion-more:focus {
    background-color: var(--GCB-limit);
    color: #fff;
    box-shadow: 0 4px 10px rgba(214, 0, 17, 0.3);
}

@media (max-width: 767px) {
    .promotion-more {
        margin-top: 16px;
        padding: 8px 24px;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   倒數計時
   -------------------------------------------------------------------------- */
.promotion-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #fff;
}

.promotion-countdown__unit {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.promotion-countdown__num {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.promotion-countdown__txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.promotion-countdown__sep {
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.49);
    transform: translateY(-2px);
    animation: GCB-blink 1s steps(1, end) infinite;
}

/* 秒數每次跳動時輕微放大，讓人看得出來在動 */
.promotion-countdown__unit:last-of-type .promotion-countdown__num {
    animation: GCB-tick 1s ease-out infinite;
}

/* 剩不到 24 小時：整組倒數脈動提醒 */
.promotion-countdown.is-urgent {
    animation: GCB-pulse 1.2s ease-in-out infinite;
}

@keyframes GCB-blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.25;
    }
}

@keyframes GCB-tick {
    0% {
        transform: scale(1.12);
    }

    30%,
    100% {
        transform: scale(1);
    }
}

@keyframes GCB-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.04);
    }
}

@media (max-width: 991px) {
    .promotion-countdown__num {
        font-size: 32px;
    }

    .promotion-countdown__sep {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .promotion-countdown {
        gap: 6px;
    }

    .promotion-countdown__num {
        font-size: 24px;
    }

    .promotion-countdown__sep {
        font-size: 24px;
    }

    .promotion-countdown__txt {
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   卡片列表
   -------------------------------------------------------------------------- */
.promotion-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px var(--GCB-gap);
}

/* 1200 以下容器變窄，2 欄會太擠，改成單欄 */
@media (max-width: 1199px) {
    .promotion-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.promotion-card {
    display: flex;
    gap: 14px;
    padding: 15px;
    background-color: #fff;
    border-radius: var(--GCB-card-radius);
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover：卡片浮起、陰影加深 */
.promotion-card:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

/* 已結束的區塊整體降彩度，也不做 hover 互動 */
.promotion-section.is-ended .promotion-card {
    filter: grayscale(0.35);
}

.promotion-section.is-ended .promotion-card:hover {
    transform: none;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
    .promotion-card {
        gap: 10px;
        padding: 10px;
    }
}

/* 商品圖 + 折扣標 */
.promotion-card__thumb {
    position: relative;
    flex: 0 0 var(--GCB-thumb);
    width: var(--GCB-thumb);
    height: var(--GCB-thumb);
    border-radius: var(--GCB-card-radius);
    background-color: #d9d9d9;
    overflow: hidden;
}

.promotion-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* hover：圖片微放大 */
.promotion-card:hover .promotion-card__thumb img {
    transform: scale(1.06);
}

.promotion-card__discount {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 12px;
    border-radius: var(--GCB-card-radius);
    background-color: var(--GCB-badge-bg);
    color: var(--GCB-red);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.8px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover：折扣標反白，跳出來一點 */
.promotion-card:hover .promotion-card__discount {
    background-color: var(--GCB-red);
    color: #fff;
}

/* 單欄時圖片縮小，避免卡片過高 */
@media (max-width: 1199px) {
    .promotion-card__thumb {
        flex-basis: 200px;
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 767px) {
    .promotion-card__thumb {
        flex-basis: 120px;
        width: 120px;
        height: 120px;
    }

    .promotion-card__discount {
        bottom: 6px;
        padding: 2px 8px;
        font-size: 13px;
        letter-spacing: 0;
    }
}

@media (max-width: 400px) {
    .promotion-card__thumb {
        flex-basis: 100px;
        width: 100px;
        height: 100px;
    }
}

/* 卡片文字區 */
.promotion-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 7px;
}

@media (max-width: 767px) {
    .promotion-card__body {
        padding-top: 0;
    }
}

.promotion-card__tit {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    /* 標題最多兩行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* hover：標題轉紅 */
.promotion-card:hover .promotion-card__tit {
    color: var(--GCB-red);
}

.promotion-card__spec {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #414141;
    /* 規格最多三行。

       這裡刻意「不用」-webkit-line-clamp：後台會在規格裡輸入 <br/> 斷行，
       而 line-clamp 遇到 <br> 造成的行框邊界時，會把被裁掉那一行的內容
       整行換成省略號（實測畫面上第二行只剩「…」），是 Blink 的已知行為。
       改用 line-height 的整數倍裁切，行為完全可預測；代價是沒有「…」。
       max-height 必須是 line-height 的整數倍，才不會出現被切一半的文字。

       標題 .promotion-card__tit 仍保留 line-clamp，因為它走 {{ }} mustache、
       不會有 <br>，省略號在那邊是正常的。 */
    max-height: calc(1.5em * 3);
    overflow: hidden;
}

@media (max-width: 767px) {
    .promotion-card__tit {
        font-size: 16px;
    }

    .promotion-card__spec {
        margin-top: 4px;
        font-size: 13px;
    }
}

/* 價格區（靠卡片底部對齊） */
.promotion-card__price {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e4e4e4;
}

.promotion-card__mprice {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: #c0c0c0;
    text-decoration: line-through;
}

.promotion-card__pointrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 8px;
}

.promotion-card__point {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--GCB-point);
    font-variant-numeric: tabular-nums;
}

/* 點數 icon：沿用 /_common/reward/v2/_css 既有的 P 圖示（mask 方式上色） */
.promotion-card__point::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14.3722 7.66509C14.3721 3.96094 11.3692 0.958014 7.66509 0.958014C3.96095 0.958039 0.958039 3.96095 0.958014 7.66509C0.958014 11.3692 3.96094 14.3721 7.66509 14.3722V15.3302C3.43177 15.3301 0 11.8984 0 7.66509C2.52547e-05 3.43179 3.43179 2.52556e-05 7.66509 0C11.8984 0 15.3301 3.43177 15.3302 7.66509C15.3302 11.8984 11.8984 15.3302 7.66509 15.3302V14.3722C11.3693 14.3722 14.3722 11.3693 14.3722 7.66509Z' fill='black'/><path d='M5.22483 3.97289V11.4981H6.45795V8.61027H8.32345C10.1573 8.61027 11.0743 7.83035 11.0743 6.28104C11.0743 4.74228 10.1573 3.97289 8.34452 3.97289H5.22483ZM6.45795 5.02684H8.24967C8.78718 5.02684 9.18768 5.1217 9.45117 5.32195C9.70412 5.51166 9.83059 5.82785 9.83059 6.28104C9.83059 6.73424 9.70412 7.06097 9.45117 7.26122C9.19822 7.45093 8.79772 7.55632 8.24967 7.55632H6.45795V5.02684Z' fill='black'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14.3722 7.66509C14.3721 3.96094 11.3692 0.958014 7.66509 0.958014C3.96095 0.958039 0.958039 3.96095 0.958014 7.66509C0.958014 11.3692 3.96094 14.3721 7.66509 14.3722V15.3302C3.43177 15.3301 0 11.8984 0 7.66509C2.52547e-05 3.43179 3.43179 2.52556e-05 7.66509 0C11.8984 0 15.3301 3.43177 15.3302 7.66509C15.3302 11.8984 11.8984 15.3302 7.66509 15.3302V14.3722C11.3693 14.3722 14.3722 11.3693 14.3722 7.66509Z' fill='black'/><path d='M5.22483 3.97289V11.4981H6.45795V8.61027H8.32345C10.1573 8.61027 11.0743 7.83035 11.0743 6.28104C11.0743 4.74228 10.1573 3.97289 8.34452 3.97289H5.22483ZM6.45795 5.02684H8.24967C8.78718 5.02684 9.18768 5.1217 9.45117 5.32195C9.70412 5.51166 9.83059 5.82785 9.83059 6.28104C9.83059 6.73424 9.70412 7.06097 9.45117 7.26122C9.19822 7.45093 8.79772 7.55632 8.24967 7.55632H6.45795V5.02684Z' fill='black'/></svg>");
}

.promotion-card__limit {
    font-size: 20px;
    line-height: 1.4;
    color: var(--GCB-limit);
    white-space: nowrap;
}

.promotion-card__limit b {
    font-weight: 600;
}

@media (max-width: 767px) {
    .promotion-card__price {
        padding-top: 8px;
    }

    .promotion-card__mprice {
        font-size: 13px;
    }

    .promotion-card__point {
        font-size: 24px;
    }

    .promotion-card__point::before {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }

    .promotion-card__limit {
        font-size: 14px;
    }
}

/* 立即搶購按鈕 */
.promotion-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 9px 48px;
    border: 0;
    border-radius: var(--GCB-card-radius);
    background-color: var(--GCB-btn);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.promotion-card__btn:hover,
.promotion-card__btn:focus {
    background-color: var(--GCB-red-dark);
    color: #fff;
    box-shadow: 0 4px 10px rgba(216, 12, 24, 0.35);
}

/* hover：按鈕掃過一道光 */
.promotion-card__btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    pointer-events: none;
}

.promotion-card:hover .promotion-card__btn::after {
    animation: GCB-shine 0.7s ease-out;
}

@keyframes GCB-shine {
    from {
        left: -60%;
    }

    to {
        left: 130%;
    }
}

.promotion-card__btn.disabled,
.promotion-card__btn[disabled] {
    background-color: #c0c0c0;
    pointer-events: none;
    box-shadow: none;
}

.promotion-card__btn.disabled::after {
    display: none;
}

@media (max-width: 767px) {
    .promotion-card__btn {
        margin-top: 8px;
        padding: 7px 16px;
        font-size: 14px;
    }
}

/* 尚未開賣：點數以 ????? 呈現、無按鈕 */
.promotion-section.is-comingsoon .promotion-card__point {
    letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   本波注意事項（.promotion-list 之後、.promotion-section 之內；可有可無）
   -------------------------------------------------------------------------- */
.promotion-note {
    /* 要比 .promotion-list 的 row gap（26px）大，才讀得出這是獨立區塊、
       而不是最後一列卡片的附屬說明 */
    margin-top: 32px;
    padding: 20px 28px;
    border-radius: var(--GCB-card-radius);
    /* 此底色刻意固定為紅色系、不吃站台主色（--primary-color-light），
       避免其他站台（例如陽信的 --primary-color-light 為綠色）套用此元件時變色，
       故獨立定義 --GCB-note-bg（見本檔 :root），不隨站台佈景改變 */
    background-color: var(--GCB-note-bg);
}

.promotion-note__tit {
    margin: 0;
    /* 跟 .promotion-card__tit 同一級（20px），與下方 lead 拉開差距，
       才不會只比內文大 2px 而顯得層級模糊 */
    font-size: 20px;
    font-weight: 700;
    /* 主標可能放較長的活動文案，拉高行高讓換行不擠 */
    line-height: 1.5;
    /* 用主色讓注意事項標題更醒目 */
    color: var(--GCB-red);
}

/* 標題下方的說明段：這一句是本波的活動主張（賣點），
   權重必須高於下面的條款，所以用黑色 + 600，並緊貼標題成為同一組 */
.promotion-note__lead {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    color: #000;
}

/* 清單上方的小標（如「活動提醒：」）：只是條列的引導詞，
   權重要低於 lead，否則會出現「越往下越重」的層級反轉 */
.promotion-note__sub {
    /* 上方留白拉大，把「主張」與「條款」分成兩組 */
    margin: 20px 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    /* 沿用 .promotion-card__spec 既有的次要文字色 */
    color: #414141;
}

/* 條列內容改用數字編號（<ol>），用 padding-left 做懸掛縮排，
   讓第二行文字與第一行文字對齊、數字不會壓到文字 */
.promotion-note__list {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
}

.promotion-note__list li {
    padding-left: 4px;
    font-size: 15px;
    line-height: 1.9;
    /* 沿用 .promotion-card__spec 既有的次要文字色 */
    color: #414141;
}

/* 條款可能長到 2～3 行，項目之間要分得開才看得出是不同條 */
.promotion-note__list li+li {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .promotion-note {
        margin-top: 20px;
        padding: 16px;
    }

    .promotion-note__tit {
        margin-bottom: 0;
        font-size: 17px;
        line-height: 1.5;
    }

    .promotion-note__lead {
        margin-top: 4px;
        font-size: 15px;
    }

    .promotion-note__sub {
        margin-top: 16px;
        font-size: 14px;
    }

    .promotion-note__list {
        padding-left: 18px;
    }

    .promotion-note__list li {
        font-size: 14px;
        line-height: 1.75;
    }

    .promotion-note__list li+li {
        margin-top: 4px;
    }
}

/* --------------------------------------------------------------------------
   進場動畫（捲到畫面內才播，由 GCB.js 的 IntersectionObserver 加 data-inview）
   -------------------------------------------------------------------------- */
/* 用 translate（獨立屬性）而不是 transform，才不會跟卡片 hover 的 transform 打架；
   舊瀏覽器不支援 translate 時會退化成單純淡入，不會壞版 */
.js-reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1),
        translate 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.js-reveal[data-inview] {
    opacity: 1;
    translate: 0 0;
}

/* 卡片同時要有 hover 的 transform / box-shadow，所以 transition 要一起宣告 */
.promotion-card.js-reveal {
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1),
        translate 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
    /* 只延遲進場的兩個屬性，hover 仍然即時反應（--i 由樣板帶入卡片序號） */
    transition-delay: 0s, 0s, calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms);
}

/* 使用者在系統關閉動效時，全部靜態呈現 */
@media (prefers-reduced-motion: reduce) {

    .js-reveal,
    .js-reveal[data-inview],
    .promotion-card.js-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .promotion-card,
    .promotion-card__thumb img,
    .promotion-card__tit,
    .promotion-card__discount,
    .promotion-card__btn {
        transition: none;
    }

    .promotion-card:hover {
        transform: none;
    }

    .promotion-card:hover .promotion-card__thumb img {
        transform: none;
    }

    .promotion-section.is-onsale .promotion-head,
    .promotion-countdown.is-urgent,
    .promotion-countdown__sep,
    .promotion-countdown__unit:last-of-type .promotion-countdown__num,
    .promotion-card:hover .promotion-card__btn::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   商品詳細頁（GCB-detail.aspx）分頁內容

   放在本共用檔、而非各站台 _css/style.css 的理由：
   1. 影片比例與規格表樣式三站（EWC / TSMC / SUNNYBANK）期望完全相同，
      不像主色需要各站不同，放共用檔一處覆蓋三站即可。
   2. develop 分支的 EWC/REWARD/_css/style.css 也在檔尾同一位置 append
      這兩組樣式（為 page.aspx 而加），若本分支也去改那支檔案，日後與
      develop 合併幾乎必然衝突（SUNNYBANK style.css 已因同一成因衝突過）。
   -------------------------------------------------------------------------- */

/* 「商品介紹」分頁的 YouTube 影片。
   對應 GCB-detail.aspx.vb 組出的 <iframe class='video' width='100%' ...>，
   該 iframe 只給了 width、沒有給 height，若這裡不定義比例，瀏覽器會
   套用 iframe 預設高度 150px，影片被壓得很扁。
   用 aspect-ratio: 16 / 9 而不是各斷點固定高度：沿用 develop 分支
   commit 0507e517 的既有做法（原本是 730/450/250/200 的固定高度，
   在非預期寬度的螢幕上仍會被壓扁）。 */
.video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}

/* 「詳細規格」分頁。後台輸入的 HTML 會被包在 #pd-spec-pane 內，
   逐列做斑馬紋、並抵銷後台 HTML 自帶的左右負邊距與固定表寬。
   樣式逐字沿用 develop 分支 EWC/REWARD/_css/style.css 的既有寫法。 */
#pd-spec-pane {
    overflow: hidden;
}

#pd-spec-pane > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#pd-spec-pane > div:nth-child(odd) {
    background: rgba(245, 245, 245, 0.8);
}

#pd-spec-pane > div:nth-child(even) {
    background: rgba(245, 245, 245, 0.4);
}

#pd-spec-pane table {
    width: auto !important;
    max-width: 100%;
}