/* =========================================================
   光阴日记 全局移动端响应式适配
   断点：max-width 768px 视为手机
   本文件在 base.html 的 extra_css 之后引入，优先级最高
   ========================================================= */

/* 移动端底部导航：桌面隐藏，手机显示 */
.m-footnav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 54px;
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    z-index: 999;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.m-footnav a {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    text-decoration: none;
}
.m-footnav a.active, .m-footnav a:active { color: #ff6600; }
.m-footnav .fi { font-size: 21px; line-height: 1; }
.m-footnav .badge {
    position: absolute;
    top: 4px;
    margin-left: 10px;
    background: #ff4400;
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* ---------- 容器与基础 ---------- */
    .w {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    img { max-width: 100%; }
    /* iOS 输入框聚焦自动放大问题：字体不小于 16px */
    input, select, textarea, button { font-size: 16px; max-width: 100%; box-sizing: border-box; }

    /* ---------- 顶部细导航 / 分类导航：手机隐藏（由底部导航替代） ---------- */
    .com-top-nav { display: none; }
    .main-nav { display: none; }

    /* ---------- 头部：Logo 缩小、搜索框自适应 ---------- */
    .header { padding: 8px 0; }
    .header .top-nav { gap: 8px; }
    .logo img { height: 30px; }
    .search-box { flex: 1; min-width: 0; }
    .search-box form { display: flex; width: 100%; }
    .search-input { width: 100%; height: 36px; flex: 1; border-width: 1px; }
    .search-btn { width: 56px; height: 38px; font-size: 14px; flex-shrink: 0; }

    /* ---------- 主内容：底部留白给导航 ---------- */
    .main-content { padding: 10px 0 70px; }
    .section-title { font-size: 19px; }

    /* ---------- 首页 Banner ---------- */
    .banner { height: auto; margin-bottom: 14px; }
    .banner img { height: auto; }

    /* ---------- 分类网格：3 列 ---------- */
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .category-item { padding: 10px 6px; }
    .category-item img { height: 72px; }

    /* ---------- 商品网格：2 列 ---------- */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-item { padding: 10px; }
    .product-item .image {
        height: 0;
        padding-bottom: 100%;
        position: relative;
    }
    .product-item .image img { position: absolute; inset: 0; }
    .product-item .name { height: auto; min-height: 0; }
    .product-item .price { font-size: 16px; }

    /* ---------- 商品详情：float 单列堆叠 ---------- */
    .product-detail { padding: 15px; }
    .product-images { float: none; width: 100%; }
    .main-image { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .product-info { margin-left: 0; margin-top: 16px; }
    .product-info h1 { font-size: 20px; }
    .product-price .price { font-size: 24px; }
    .attr-item label { display: block; width: auto; margin-bottom: 6px; }
    .attr-item select, .attr-item input { min-width: 0; width: 100%; }
    .quantity-input { width: 56px; height: 36px; }
    .btn-add-cart, .btn-buy-now {
        display: block;
        width: 100%;
        margin: 12px 0 0;
        padding: 12px 0;
        box-sizing: border-box;
    }
    .btn-buy-now { margin-left: 0; }

    /* ---------- 表格：横向滚动（购物车 / 订单等，排除定制编辑器弹窗表格） ---------- */
    .cart-table, table.data, body:not(.customize-body) table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .cart-table th, .cart-table td { padding: 10px; white-space: nowrap; }
    .cart-product { white-space: nowrap; }
    .cart-summary { text-align: left; }
    .btn-checkout { display: block; width: 100%; margin: 12px 0 0; }

    /* ---------- 登录 / 注册 / 表单容器 ---------- */
    .auth-container {
        width: 100%;
        margin: 20px auto;
        padding: 22px 16px;
        box-sizing: border-box;
    }

    /* ---------- 结算页 ---------- */
    .checkout-page { max-width: 100%; padding: 0 10px; margin: 10px auto; }
    .checkout-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        position: fixed;
        left: 0; right: 0; bottom: 54px;
        border-radius: 0;
        z-index: 998;
        padding: 12px 14px;
        box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    }
    .checkout-bar .cb-total { font-size: 22px; }
    .checkout-bar .btn-submit { width: 100%; padding: 12px 0; }
    .goods-item { flex-wrap: wrap; }
    .gi-name { max-width: none; white-space: normal; }
    .gi-sub { width: auto; }

    /* ---------- 底部导航显示 ---------- */
    .m-footnav { display: flex; }

    /* ---------- Footer 紧凑 ---------- */
    .footer { padding: 16px 0 70px; margin-top: 0; }
    .footer-copyright { font-size: 11px; }

    /* ---------- 分页 ---------- */
    .pagination a, .pagination span { padding: 6px 11px; margin: 0 3px; }
}

/* 超小屏微调 */
@media (max-width: 380px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .search-btn { width: 48px; }
}

/* =========================================================
   页面级容器适配（非 .w 容器）与定制编辑器特殊处理
   ========================================================= */
@media (max-width: 768px) {
    /* 各页面级容器：取消固定最大宽度，自适应并留边距 */
    .cart-page, .order-page, .addr-page, .template-center,
    .my-designs-page, .profile-wrap {
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* 个人中心：侧边栏改为顶部通栏，内容堆叠在下方 */
    .profile-wrap { flex-direction: column; gap: 12px; }
    .profile-sidebar { width: 100%; margin-bottom: 0; }

    /* 定制编辑器为全屏应用，隐藏移动端底部导航与页脚，避免遮挡工具栏 */
    body.customize-body .m-footnav { display: none; }
    body.customize-body .footer { display: none; }
    body.customize-body .main-content { padding-bottom: 0; }
}