/* 2026-10-16 老闆：商品頁「加入購物車／立即預購」捲動時固定在畫面底部（assets/js/wx-product-buybar.js）。
   按鈕顏色跟官網主題色（--primary-color）。
   10/16 精緻化：原本手機的按鈕列會「黏在底部、沒有底色、浮在內容上」，捲到後面又換成這條底部列，兩種樣子不一樣。
   底部列程式有跑起來時（body.wx-buybar-ready），原本按鈕列改回乖乖待在原位，畫面底部只會有這一種樣子。 */
.wx-buybar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5300; /* 在右下聯絡鈕（5400）下面、購物車抽屜（6100）與預購視窗（9999）下面 */
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(calc(100% + 12px));
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    box-sizing: border-box;
    pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .wx-buybar{
        background: rgba(255, 255, 255, 0.86);
        -webkit-backdrop-filter: saturate(1.6) blur(14px);
        backdrop-filter: saturate(1.6) blur(14px);
    }
}
.wx-buybar.is-on{
    transform: none;
    opacity: 1;
    pointer-events: auto;
}
.wx-buybar__inner{
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}
.wx-buybar__info{
    flex: 1 1 auto;
    min-width: 0;
}
.wx-buybar__name{
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-color, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wx-buybar__btns{
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}
.wx-buybar .wx-buybar__btn{
    width: 180px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 15px;
    letter-spacing: 0.08em;
}
/* 10/16 有多個版本的商品：底部列也放版本選單＋售價。
   左欄：上「選擇款式與顏色」、下拉選單在下面；右欄：上「售價」、金額在下面（同一行對齊）。電腦版整塊放按鈕左邊；手機放按鈕上面。 */
.wx-buybar__variant{
    flex: 0 1 420px;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "vlabel pkicker" "vselect pvalue";
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
}
.wx-buybar__variant[hidden]{
    display: none;
}
.wx-buybar__variant-label{
    grid-area: vlabel;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wx-buybar__price-kicker{
    grid-area: pkicker;
    justify-self: start; /* 老闆：「售價」左邊對齊下面金額的 $ */
    font-size: 12px;
    font-weight: 700;
    color: #8a8f8b;
}
.wx-buybar__price{
    grid-area: pvalue;
    justify-self: start;
    font-size: 20px;
    font-weight: 800;
    color: #d1434f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wx-buybar .wx-buybar__select{
    grid-area: vselect;
    min-width: 0;
    height: 42px;
    line-height: 42px;
    border-radius: 12px;
    text-overflow: ellipsis;
}
/* 加入購物車：白底細框（比原本灰底乾淨）；立即預購：主題色＋淡淡陰影。
   頁面上原本那排按鈕也套一樣的樣子，捲上捲下兩個地方看起來是同一組按鈕。 */
.wx-product-detail__cta-row .wx-product-detail__cta{
    border-radius: 12px;
}
.wx-product-detail__cta-row .wx-product-detail__cta--cart,
.wx-buybar .wx-buybar__btn.wx-product-detail__cta--cart{
    background: #fff;
    border-color: color-mix(in srgb, var(--primary-color, var(--pos-btn-bg, #778ca3)) 45%, #fff);
}
.wx-product-detail__cta-row .wx-product-detail__cta--cart:hover:not(:disabled),
.wx-buybar .wx-buybar__btn.wx-product-detail__cta--cart:hover:not(:disabled){
    background: color-mix(in srgb, var(--primary-color, var(--pos-btn-bg, #778ca3)) 8%, #fff);
}
.wx-product-detail__cta-row .wx-product-detail__cta--buy:not(:disabled),
.wx-buybar .wx-buybar__btn.wx-product-detail__cta--buy:not(:disabled){
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color, var(--pos-btn-bg, #778ca3)) 30%, transparent) !important;
}
.wx-buybar .wx-buybar__btn.wx-product-detail__cta--sold-out{
    width: 370px;
}
/* 底部列出現時：頁尾多留空間不被蓋住；右下聯絡鈕平順往上讓位 */
body.wx-buybar-ready .wx-contact-launcher{
    transition: bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.wx-buybar-on{
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
body.wx-buybar-on .wx-contact-launcher{
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
/* 10/16 電腦版再優化：左邊小縮圖＋商品名（最多兩行）；有版本選單時整列「底線對齊」，下拉選單、金額、按鈕在同一條線上 */
.wx-buybar__thumb{
    display: none;
}
@media (min-width: 768px){
    .wx-buybar{
        padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .wx-buybar__inner{
        gap: 28px;
    }
    .wx-buybar.has-variant .wx-buybar__inner{
        align-items: flex-end;
    }
    .wx-buybar__info{
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
    }
    .wx-buybar__thumb{
        display: block;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid #dee6ed;
        background: #eff3f8;
    }
    .wx-buybar__thumb[hidden]{
        display: none;
    }
    .wx-buybar__name{
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.4;
        overflow: hidden;
        word-break: break-all;
    }
    .wx-buybar__variant{
        flex: 0 0 340px;
    }
    .wx-buybar .wx-buybar__select{
        height: 46px;
        line-height: 46px;
    }
    .wx-buybar__price{
        font-size: 22px;
        line-height: 46px;
    }
    .wx-buybar .wx-buybar__btn{
        width: 168px;
    }
}
/* 有版本選單時（電腦版）底部列較高，頁尾與聯絡鈕多讓一點 */
body.wx-buybar-on.wx-buybar-has-variant{
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
body.wx-buybar-on.wx-buybar-has-variant .wx-contact-launcher{
    bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
/* 手機／小平板（跟原本按鈕列黏底的斷點 767 一致）：只有兩顆按鈕平分（不放商品名、不放價格） */
@media (max-width: 767px){
    body.wx-buybar-ready .wx-product-detail__cta-row{
        position: static;
        padding: 24px 0 0;
    }
    body.wx-buybar-ready:not(.wx-buybar-on) .wx-contact-launcher{
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .wx-buybar{
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .wx-buybar__info{
        display: none;
    }
    .wx-buybar.has-variant .wx-buybar__inner{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wx-buybar__variant{
        flex: 0 0 auto;
    }
    .wx-buybar .wx-buybar__select{
        height: 40px;
        line-height: 40px;
        padding-left: 12px;
        font-size: 14px;
    }
    .wx-buybar__btns{
        flex: 1 1 auto;
        gap: 10px;
    }
    .wx-buybar .wx-buybar__btn,
    .wx-buybar .wx-buybar__btn.wx-product-detail__cta--sold-out{
        width: auto;
        flex: 1 1 0;
        height: 46px;
        padding: 0 8px;
        font-size: 15px;
        letter-spacing: 0.06em;
    }
    body.wx-buybar-on{
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
    body.wx-buybar-on .wx-contact-launcher{
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    body.wx-buybar-on.wx-buybar-has-variant{
        padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px));
    }
    body.wx-buybar-on.wx-buybar-has-variant .wx-contact-launcher{
        bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }
}
/* 10/16 老闆：頁面上「選擇平台與版本」選單跟下面兩顆按鈕離太遠（原本約 40～52px）→ 有選單時按鈕列不再多墊上方空白，間距約 16px */
body .wx-product-detail__variants + .wx-product-detail__cta-row{
    padding-top: 0;
}
@media (max-width: 767px){
    body .wx-product-detail__variants + .wx-product-detail__cta-row{
        margin-top: 0;
    }
}
@media (prefers-reduced-motion: reduce){
    .wx-buybar,
    body.wx-buybar-ready .wx-contact-launcher{
        transition: none;
    }
}