/* 行動版修正（2026-08-22 第二輪）
 *
 * 實測 375×812 逐頁量到的問題：
 *  - 22 個頁面頂端有一個寫死 height:150px 的空白 div，但手機導覽列只有 79px
 *  - Bootstrap 的 .row 負邊界在沒有 .container 包覆時會左右各溢出 12px
 *  - 商品頁的名稱在 y=835、購買鈕在 y=1273，手機第一屏完全看不到重點
 *  - 一番賞的抽數按鈕在 y=1142
 *  - 縮圖列佔 250~260px
 *  - 輪播圓點 10×30、footer 連結 25px 高、radio 16×16、輸入框 38px
 *  - 會員側選單在手機佔滿 807px 一整屏才看得到訂單
 */

/* ---------------------------------------------------------------
   1. 頂部空白：導覽列是 fixed，需要一段留白，但 150px 是桌機的量。
      改成用導覽列實際高度換算，手機省下約 60px。
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    div[style*="height:150px"],
    div[style*="height: 150px"] {
        height: 92px !important;
    }
}

@media (max-width: 575.98px) {
    div[style*="height:150px"],
    div[style*="height: 150px"] {
        height: 84px !important;
    }
}

/* ---------------------------------------------------------------
   2. .row 負邊界溢出：頁面直接放 .row 而沒有 .container 時，
      Bootstrap 的 -12px margin 會讓內容比視窗寬 24px。
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body > .row,
    body > section > .row,
    #detail > .row,
    #pd > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---------------------------------------------------------------
   3. 觸控目標：Apple 44pt / Google 48dp
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* 頁尾連結原本只有 25px 高 */
    #contact .nav-link2 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--mm-tap, 44px);
        padding: 4px 12px;
    }

    /* 輪播圓點原本 10×30 */
    .carousel-indicators [data-bs-target],
    .carousel-indicators button {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        margin: 0 10px !important;
        position: relative;
    }
    /* 視覺仍是小圓點，但可點範圍撐到 44px */
    .carousel-indicators [data-bs-target]::after,
    .carousel-indicators button::after {
        content: "";
        position: absolute;
        inset: -16px;
    }
    .carousel-indicators { padding-bottom: 8px; }

    /* 表單控制項 */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        min-height: var(--mm-tap, 44px);
        /* iOS 在字級小於 16px 時會自動放大整頁 */
        font-size: 16px;
    }
    textarea { min-height: 88px; }

    /* radio / checkbox 原本 16×16，點不到 */
    .form-check {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--mm-tap, 44px);
        margin-bottom: 4px;
    }
    .form-check-input {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }
    .form-check-label {
        margin: 0;
        flex: 1 1 auto;
        min-height: var(--mm-tap, 44px);
        display: flex;
        align-items: center;
    }
    .form-check-inline { display: inline-flex; margin-right: 16px; }

    /* 麵包屑 */
    .listing-crumbs a,
    .mt-3.mb-3.px-5 a {
        display: inline-flex;
        align-items: center;
        min-height: var(--mm-tap, 44px);
    }

    /* 首頁輪播箭頭 */
    .home-arrow { width: var(--mm-tap, 44px) !important; }
}

/* ---------------------------------------------------------------
   4. 商品／一番賞詳細頁：讓名稱、價格、購買動作進到第一屏
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 主圖縮小，留空間給下面的資訊 */
    #prod_detail_image_main,
    .mcoin-main-img,
    .main-image {
        height: 260px !important;
        max-height: 260px !important;
        width: 100% !important;
    }

    /* 縮圖列改成單列橫向捲動，從 250px 降到約 76px */
    #detail .col-xl-5 > .row,
    .thumb-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin: 0 !important;
    }
    #detail .col-xl-5 > .row > div,
    .thumb-row > * {
        flex: 0 0 68px !important;
        max-width: 68px !important;
        width: 68px !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    #detail .col-xl-5 > .row img,
    .thumb-row img {
        width: 68px;
        height: 68px;
        object-fit: cover;
    }

    /* 麵包屑收窄 */
    .mt-3.mb-3.px-5 { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------------------------------------------------------------
   5. 手機底部固定購買列
      這是台灣電商（蝦皮 / momo / PChome）的標準做法：
      價格與主要動作永遠在拇指範圍內，不必捲回去。
   --------------------------------------------------------------- */
.mm-buybar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--mm-line, #DFE6E9);
    box-shadow: 0 -4px 16px rgba(17, 24, 32, .10);
}

.mm-buybar__price {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.mm-buybar__label { font-size: 11px; color: var(--mm-ink-3, #7C8B93); }
.mm-buybar__value {
    font-size: 19px;
    font-weight: 700;
    color: var(--mm-orange-dark, #E5431C);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-buybar__actions { display: flex; gap: 8px; flex: 0 0 auto; }

.mm-buybar .mm-btn {
    min-height: var(--mm-tap, 44px);
    padding: 0 16px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .mm-buybar { display: flex; }
    /* 讓底部固定列不遮住頁尾內容 */
    body.has-buybar { padding-bottom: 76px; }
    /* 回到頂端按鈕往上讓位 */
    body.has-buybar .fixed-btn,
    body.has-buybar #gotop,
    body.has-buybar .btn-gototop { bottom: 88px !important; }
}

/* ---------------------------------------------------------------
   6. 會員中心：手機上側選單原本佔滿 807px 才看得到內容
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .member-sidebar { margin: 0 !important; }

    /* 頭像與錢包資訊壓縮成一列 */
    .member-sidebar > .col-12:first-child { margin-bottom: 12px !important; }
    .member-box { transform: scale(.82); transform-origin: top center; }

    /* 原本的直式選單收起來，改用下面的橫向分頁列 */
    .member-sidebar > .col-12:not(:first-child):not(.member-nav-scroll) {
        display: none;
    }
    .member-nav-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 10px;
        margin-bottom: 12px;
        scrollbar-width: none;
    }
    .member-nav-scroll::-webkit-scrollbar { display: none; }
    .member-nav-scroll a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: var(--mm-tap, 44px);
        padding: 0 16px;
        border: 1px solid var(--mm-line, #DFE6E9);
        border-radius: 999px;
        background: #fff;
        color: var(--mm-ink-2, #4A5860);
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        white-space: nowrap;
    }
    .member-nav-scroll a.is-current {
        border-color: var(--mm-cyan, #0ABFD2);
        background: var(--mm-cyan-soft, #E4F7F9);
        color: var(--mm-cyan-dark, #07808F);
    }
}

@media (min-width: 992px) {
    .member-nav-scroll { display: none; }
}

/* ---------------------------------------------------------------
   7. 結帳步驟列：實測在 375px 會右側溢出 12px
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .row.mt-5.ms-3 { margin-left: 0 !important; margin-right: 0 !important; }
    .row.mt-5.ms-3 > .col-4 { padding-left: 4px; padding-right: 4px; }
    .row.mt-5.ms-3 .font-bold-black { font-size: 12px; }
}

/* ---------------------------------------------------------------
   8. 表格：手機上讓它自己橫捲，不要撐破頁面
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .order-info,
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------
   9. 一番賞抽數按鈕：手機上排成一列比較好按也比較短
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .draw-panel {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }
    .draw-option {
        min-height: 72px;
        padding: 8px 4px;
    }
    .draw-option .font-24 { font-size: 17px; }
    .draw-option .font-20 { font-size: 13px; margin-top: 4px !important; }
}

/* ---------------------------------------------------------------
   10. 導覽列讓位空白
       原本 22 個頁面各自寫死 <div style="height:150px">，那是桌機導覽列
       的高度；手機導覽列只有 79px，等於白白吃掉近一屏的六分之一。
   --------------------------------------------------------------- */
.nav-spacer { height: 150px; }

@media (max-width: 991.98px) { .nav-spacer { height: 92px; } }
@media (max-width: 575.98px) { .nav-spacer { height: 84px; } }

/* ---------------------------------------------------------------
   11. 頁尾與其他未包在 .container 內的 .row
       Bootstrap 的 .row 有 -12px 負邊界，靠 .container 的 padding 抵銷。
       這些 row 直接放在 section 底下，於是左右各外擴 12px。
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #contact > .row,
    #contact .row.d-flex.justify-content-center,
    #footer .row,
    .member-sidebar,
    section > .row.d-flex.justify-content-center {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 頁尾在手機上改成單欄置中，資訊才讀得順 */
    #contact .footer-link-col { border: 0 !important; }
    #contact .row.h-50 { row-gap: 4px; }
}

/* ---------------------------------------------------------------
   12. 橫幅輪播
       原圖是 1200×352 的橫式，之前寫死 height="480" 會把它壓成 375×480，
       整張圖被縱向拉長變形。改成依原圖比例，手機上約 110px 高，
       商品也就能提早出現在畫面上。
   --------------------------------------------------------------- */
.banner-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 352;
    object-fit: cover;
    display: block;
}

@media (max-width: 767.98px) {
    /* 手機上橫幅不該吃掉超過三分之一的畫面 */
    .banner-img { max-height: 34vh; }
    #banner .carousel-item { max-height: 34vh; overflow: hidden; }
}

/* 輪播圓點：視覺維持小圓點，但把可點範圍撐開，
   並拉開間距避免相鄰兩點的可點區重疊（測到點中間會選錯張）。 */
@media (max-width: 991.98px) {
    .carousel-indicators [data-bs-target],
    .carousel-indicators button {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .carousel-indicators [data-bs-target]::after,
    .carousel-indicators button::after {
        inset: -14px -18px;
    }
}