/*
 * ux.css — Stage A（全域渲染路徑）補丁樣式
 * 只放「不方便直接改 minified style.css」的覆寫，載入順序排在 style.css 之後，見 _Layout.cshtml。
 */

/* --- A7：字級下限 16px ---
   style.css（minified）裡 `.paragraph,body,p{font-size:15px;line-height:26px}` 與
   `.btn,.navbar .nav-item .nav-link{font-size:15px;...}` 兩條低於 16px 門檻，在此覆寫。
   選擇跟原本規則同一組選擇器一起覆寫（而不是只動 body/.btn 單一選擇器字面），
   否則 <p> 內文、.navbar-item 型連結會繼續維持 15px，等於沒修到。
   style.css 裡其餘 <16px 的規則（.cart-wrapper li i、.product-label、.dashboard-menu li a、
   .checkout-form .form-group label、.product-checkout-details、.post-meta、.top-header 等）
   都是本次 Stage A 三個檔案（_Layout.cshtml / script.js / ux.css）以外的頁面才會用到的元件樣式，
   不在這次改動範圍內，也没有把握改了不會動到其他 view 的版面，故不動，留給 PM／對應 view 的 worker 處理。 */
body,
p,
.paragraph {
    font-size: 16px;
}

.btn,
.navbar .nav-item .nav-link {
    font-size: 16px;
}

/* --- A6：slick 輪播容器預留高度，避免初始化前後高度塌陷再撐開 ---
   .hero-slider / .collection-slider / .product-slider 在 style.css 裡完全没有定義高度或寬度
   （grep 確認過，只有 .hero-slider{position:static} 與各 arrow 的樣式），高度純粹由裡面的內容
   （slide 的圖片／文字）撐出來，且三個頁面（Home/Index、Home/Product）的實際圖檔在這個鏡像環境裡
   不存在（src/images 整個資料夾沒有複製過來），量不出真正的像素值，不能瞎猜一個 min-height。
   改用結構性做法：slick.js 初始化前，讓容器只顯示「第一個子項」、其餘子項先隱藏——
   這剛好等於 slick 初始化「後」的樣子（三個輪播的預設 slidesToShow 都是 1，
   collection-slider 雖然 slidesToShow:4，但同一列多顯示幾項不影響列高，不會造成 CLS）。
   等 slick.js 執行完會自己在容器上加 .slick-initialized 這個 class，並用自己的 CSS
   （addons.css 裡的 .slick-slide{display:none} / .slick-initialized .slick-slide{display:block}）
   接管顯示邏輯，這條規則只在「初始化之前」生效，不會跟 slick 自己的樣式打架。 */
.hero-slider:not(.slick-initialized) > *:not(:first-child),
.collection-slider:not(.slick-initialized) > *:not(:first-child),
.product-slider:not(.slick-initialized) > *:not(:first-child) {
    display: none;
}

/* --- post-task 簡化：購物車／結帳三頁原本各自複製一份的共用樣式，收斂到這裡 ---
   來源：Views/Home/Cart.cshtml、Views/Cart/CheckOut.cshtml、Views/Cart/CheckOutCombo.cshtml
   .cartThumb / .paySubmitTb 這兩個 class 只有上述檔案在用，搬成全站規則不會誤傷其他頁。
   刻意「沒有」把同一段 media query 裡的 .reciverTb 規則一起搬過來：那個 class 另外還被
   Views/CustomPayLink/Index.cshtml 使用，搬成全站規則會改到一個這次沒驗證過的付款連結頁，
   為了少幾行重複而動到未驗證的頁面不划算，所以 .reciverTb 仍留在各自的 view 裡。 */
.cartThumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.paySubmitTb {
    float: right;
}

@media (max-width: 576px) {
    .paySubmitTb {
        float: none;
        width: 100%;
    }

    .paySubmitTb td {
        display: block;
        width: 100% !important;
    }

    .paySubmitTb input[type="submit"], .paySubmitTb input[type="button"] {
        width: 100%;
        float: none;
        margin-left: 0 !important;
    }
}