/**
 * 手機店家頁浮動快捷鈕
 * 回上一頁／回頂／分享／字級／左右切換；桌機不顯示
 */
.shop-fab {
    display: none;
}

@media (max-width: 760px) {
    /* 字級掛在 html：內文多為 rem，改根字級才會真的變大 */
    html.shop-fs-lg { font-size: 18.5px; }
    html.shop-fs-xl { font-size: 21.5px; }
    html.shop-fs-lg body { font-size: 17px; }
    html.shop-fs-xl body { font-size: 19.5px; }

    .shop-fab {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
        position: fixed;
        z-index: 90;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        left: auto;
    }
    .shop-fab.is-left {
        left: max(12px, env(safe-area-inset-left, 0px));
        right: auto;
    }

    .shop-fab__stack {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
    }

    .shop-fab__btn,
    .shop-fab__side {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid var(--line, #e5e5e0);
        background: rgba(255, 255, 255, .96);
        color: var(--ink, #14181d);
        box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
        font: inherit;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .shop-fab__btn:hover,
    .shop-fab__side:hover {
        text-decoration: none;
        border-color: var(--brand-line, #ead5cb);
        color: var(--brand, #b3401e);
    }
    .shop-fab__btn.is-brand {
        background: var(--brand, #b3401e);
        border-color: var(--brand, #b3401e);
        color: #fff;
    }
    .shop-fab__btn[hidden] { display: none !important; }

    .shop-fab__side {
        width: 36px;
        height: 36px;
        font-size: .78rem;
        opacity: .92;
    }

    .shop-fab__share-wrap {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
        position: relative;
    }
    /* 橫向一排：FB / LINE / X / 脆 一次看齊，避免直向被裁掉 */
    .shop-fab__share {
        display: none;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid var(--line, #e5e5e0);
        box-shadow: 0 2px 12px rgba(16, 24, 40, .16);
    }
    .shop-fab.is-left .shop-fab__share {
        flex-direction: row-reverse;
    }
    .shop-fab.is-share-open .shop-fab__share {
        display: flex;
    }
    .shop-fab:not(.is-left) .shop-fab__share {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
    }
    .shop-fab.is-left .shop-fab__share {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
    }
    .shop-fab__share a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .01em;
        text-decoration: none;
        color: #fff;
        flex: 0 0 auto;
    }
    .shop-fab__share a.fb { background: #1877f2; }
    .shop-fab__share a.line { background: #06c755; font-size: .52rem; }
    .shop-fab__share a.x { background: #111; }
    .shop-fab__share a.threads {
        background: #101010;
        border: 1.5px solid #fff;
        box-shadow: inset 0 0 0 1px #333;
        font-size: .7rem;
    }
}