/* ===================================================
   壹壹商城前台响应式适配 (mall-responsive.css)
   三端适配: PC (>1225px) / 平板 (768-1225px) / 手机 (<768px)
   使用 !important 覆盖原 CSS 的固定宽度，原文件不动
   =================================================== */

/* ===== 基础：确保所有元素 box-sizing ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== 汉堡菜单按钮（手机端显示）===== */
.mall-hamburger {
    display: none;
    position: fixed;
    top: 8px;
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    background: #1baeae;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ===== 平板端 (max-width: 1225px) ===== */
@media (max-width: 1225px) {

    /* --- 覆盖 common.css 中强制 body 1226px --- */
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* --- 通用容器宽度重置 --- */
    .w,
    .container,
    #header .center,
    #nav .banner_x,
    #content #banner,
    #content #sub_banner,
    #content #flash,
    #content #recommend,
    .sort .list,
    .classify .category,
    .goods_item .main,
    .goods_item .pages .page_wrap,
    #cart .banner_x,
    #cart .cart_bg .list,
    #cart .cart_bg .list .top2,
    #cart .cart_bg .list .content2,
    #cart .cart_bg .pre_order,
    #personal .self-info,
    #detail .dc .content,
    .section,
    .w1100,
    .top .logo,
    .form,
    .order-header .yiyi-mall-logo,
    .section .settle_content,
    .section .settle_content .yfze {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 不给某些元素加 padding（已有内部 padding） */
    .section,
    #cart .cart_bg .list {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --- Header 顶部栏 --- */
    #header .center {
        height: auto !important;
        min-height: 40px;
        flex-wrap: wrap !important;
    }

    #header .center .fl {
        width: auto !important;
        flex-shrink: 1 !important;
    }

    /* --- 导航栏 --- */
    #nav .banner_x {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 60px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #nav .banner_x .logo {
        width: 160px !important;
        background-size: contain !important;
    }

    #nav .banner_x .list > li {
        font-size: 14px !important;
        margin: 0 6px !important;
    }

    #nav .banner_x .fr .search .text {
        width: 180px !important;
    }

    #nav .banner_x .fr .search .keyword_list {
        width: 180px !important;
    }

    /* --- 首页 Banner --- */
    #content #banner {
        height: auto !important;
        flex-wrap: wrap !important;
    }

    #content #banner #cate_menu {
        display: none !important;
    }

    #content #banner .swiper-container {
        width: 100% !important;
        height: 300px !important;
    }

    /* --- 首页 Sub Banner --- */
    #content #sub_banner {
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 10px;
    }

    #content #sub_banner .selector {
        width: 100% !important;
        height: auto !important;
    }

    #content #sub_banner .hot-image {
        width: calc(50% - 5px) !important;
        height: auto !important;
    }

    #content #sub_banner .hot-image a img {
        height: auto !important;
    }

    /* --- 首页限时抢购 Flash --- */
    #content #flash {
        height: auto !important;
    }

    #content #flash ul {
        flex-wrap: wrap !important;
        gap: 10px;
    }

    #content #flash ul li {
        width: calc(33.33% - 8px) !important;
        height: auto !important;
    }

    #content #flash ul li a img {
        width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
    }

    /* --- 首页推荐 Recommend --- */
    #content #recommend {
        height: auto !important;
    }

    #content #recommend ul {
        height: auto !important;
    }

    #content #recommend ul li {
        width: calc(25% - 10px) !important;
        height: auto !important;
        min-height: 260px;
    }

    #content #recommend ul li a img {
        width: 120px !important;
        height: 120px !important;
    }

    /* --- 搜索页商品卡片 --- */
    .goods_item .main .item_card_frame {
        width: calc(25% - 8px) !important;
        height: auto !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    .goods_item .main .item_card_frame .item_card {
        padding: 20px !important;
    }

    .goods_item .main .item_card_frame .item_card a img {
        width: 100% !important;
        height: auto !important;
    }

    .goods_item .main .item_card_frame .item_brand {
        width: 100% !important;
    }

    .goods_item .main .item_card_frame .item_sub_intro {
        width: 100% !important;
    }

    /* --- 商品详情页 --- */
    #detail .intro {
        flex-wrap: wrap !important;
    }

    #detail .intro .left {
        width: 100% !important;
        max-width: 560px;
    }

    #detail .intro .right {
        width: 100% !important;
    }

    /* --- 购物车 - 横向滚动 --- */
    #cart .cart_bg .list {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #cart .cart_bg .list .top2,
    #cart .cart_bg .list .content2 {
        min-width: 900px !important;
    }

    #cart .cart_bg .pre_order {
        flex-wrap: wrap !important;
        height: auto !important;
    }

    /* --- 个人中心 / 我的订单 / 地址 --- */
    #personal .self-info {
        flex-wrap: wrap !important;
    }

    #personal .self-info .lfnav {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px;
    }

    #personal .self-info .intro {
        width: 100% !important;
    }

    #personal .self-info .intro .grzlbt {
        width: 100% !important;
    }

    #personal .self-info .intro .info_item {
        width: 100% !important;
    }

    #personal .self-info .intro .info_item span:nth-of-type(2) {
        width: auto !important;
        padding-left: 20px !important;
    }

    /* --- 订单结算页 --- */
    .order-header .yiyi-mall-logo {
        margin: 20px auto !important;
    }

    .order-header span {
        position: static !important;
        display: block;
        text-align: center;
    }

    .order-header .order-process {
        position: static !important;
        margin-left: 0 !important;
    }

    .p1 {
        text-indent: 15px !important;
    }

    .section .order-item {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .section .order-item .to_left {
        width: 100% !important;
        float: none !important;
        margin-bottom: 10px;
    }

    .section .order-item .to_right {
        width: 100% !important;
        float: none !important;
    }

    .section .settle_content {
        float: none !important;
        margin-right: 0 !important;
    }

    .section .settle_content .submmit_button {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }

    /* --- 登录/注册页 --- */
    .form {
        height: auto !important;
        min-height: 500px;
        background-size: cover !important;
    }

    .form .login {
        margin: 30px auto !important;
        float: none !important;
    }

    /* --- Footer --- */
    .site-footer .w1100 {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .site-footer .footer-article {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .site-footer .contact {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .site-footer .col-article {
        width: 50% !important;
        margin-bottom: 15px;
    }

    .site-footer .wx {
        width: 100% !important;
    }

    /* --- 地址管理卡片 --- */
    .user-address-list .address-item,
    .address-item {
        width: calc(50% - 20px) !important;
    }

    /* --- 支付选择页 --- */
    .section-order {
        padding-left: 0 !important;
    }

    .section-order .icon-right {
        position: static !important;
        margin: 0 auto 15px !important;
    }

    .payment-list li {
        width: calc(33% - 14px) !important;
    }
}


/* ===== 平板端 (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* --- 导航栏简化 --- */
    #nav {
        height: auto !important;
    }

    #nav .banner_x {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 8px 10px !important;
    }

    #nav .banner_x .logo {
        width: 130px !important;
        height: 50px !important;
    }

    #nav .banner_x .list {
        width: 100% !important;
        flex-wrap: wrap !important;
        margin-top: 5px;
    }

    #nav .banner_x .list > li {
        font-size: 13px !important;
        margin: 2px 4px !important;
    }

    #nav .banner_x .fr {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 8px;
    }

    #nav .banner_x .fr .search .text {
        width: 100% !important;
        min-width: 150px;
    }

    #nav .banner_x .fr .search {
        flex-grow: 1;
    }

    #nav .banner_x .fr .search .keyword_list {
        width: 100% !important;
    }

    #nav .banner_x .fr .search .search_hot {
        display: none !important;
    }

    /* --- 首页 Banner --- */
    #content #banner .swiper-container {
        height: 220px !important;
    }

    /* --- 首页限时抢购 - 2列 --- */
    #content #flash ul li {
        width: calc(50% - 6px) !important;
    }

    #content #flash .time {
        width: 100% !important;
    }

    /* --- 首页推荐 - 2列 --- */
    #content #recommend ul li {
        width: calc(50% - 10px) !important;
    }

    /* --- 搜索商品卡片 - 2列 --- */
    .goods_item .main .item_card_frame {
        width: calc(50% - 8px) !important;
    }

    /* --- 购物车表头/内容横滑 --- */
    #cart .cart_bg .list .top2,
    #cart .cart_bg .list .content2 {
        min-width: 800px !important;
    }

    /* --- 个人中心侧边导航横向排列 --- */
    #personal .self-info .lfnav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        padding: 10px !important;
    }

    #personal .self-info .lfnav .nav_title {
        width: auto !important;
        margin: 0 15px 0 0 !important;
    }

    #personal .self-info .lfnav .title_list ul {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #personal .self-info .lfnav .title_list ul li {
        width: auto !important;
        padding-left: 0 !important;
        margin-right: 15px;
    }

    /* --- Footer 列重排 --- */
    .site-footer .col-article {
        width: 50% !important;
    }

    /* --- 地址卡片自适应 --- */
    .user-address-list .address-item,
    .address-item {
        width: calc(50% - 12px) !important;
    }

    /* --- 支付列表 --- */
    .payment-list li {
        width: calc(50% - 14px) !important;
    }

    /* --- 订单结算 --- */
    .section .order-item .to_right p .money {
        margin-left: 20px !important;
    }

    /* --- 订单详情表格横滑 --- */
    .order-list-box {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .order-list-box .order-detail-table {
        min-width: 600px;
    }
}


/* ===== 手机端 (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* --- 显示汉堡菜单 --- */
    .mall-hamburger {
        display: block;
    }

    /* --- Header 顶部栏 --- */
    #header {
        height: auto !important;
    }

    #header .center {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 5px 10px !important;
    }

    #header .center .fl {
        display: none !important;
    }

    #header .center .fr {
        width: 100% !important;
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 5px;
    }

    #header .center .fr .user {
        width: auto !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    #header .center .fr .shopcart {
        width: auto !important;
        padding: 0 12px !important;
        margin: 0 5px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 12px !important;
    }

    #header .center .fr .login {
        width: auto !important;
        height: 30px !important;
    }

    /* --- 导航栏手机适配 --- */
    #nav .banner_x .logo {
        width: 110px !important;
        height: 40px !important;
    }

    #nav .banner_x .list > li {
        font-size: 12px !important;
    }

    /* --- 搜索框全宽 --- */
    #nav .banner_x .fr {
        flex-wrap: wrap !important;
    }

    #nav .banner_x .fr .search {
        width: calc(100% - 55px) !important;
    }

    #nav .banner_x .fr .search .text {
        width: 100% !important;
        height: 40px !important;
    }

    #nav .banner_x .fr .button {
        width: 50px !important;
        height: 40px !important;
    }

    /* --- 首页 Banner --- */
    #content #banner .swiper-container {
        height: 160px !important;
    }

    /* --- 首页 Sub Banner 1列 --- */
    #content #sub_banner .hot-image {
        width: 100% !important;
    }

    #content #sub_banner .selector {
        display: none !important;
    }

    /* --- 限时抢购 1-2 列 --- */
    #content #flash ul li {
        width: calc(50% - 5px) !important;
    }

    #content #flash ul li a img {
        margin: 10px 0 !important;
    }

    /* --- 推荐商品 2列 --- */
    #content #recommend ul li {
        width: calc(50% - 8px) !important;
        min-height: 220px !important;
    }

    #content #recommend ul li a img {
        width: 100px !important;
        height: 100px !important;
    }

    /* --- 搜索页商品 2列 --- */
    .goods_item .main .item_card_frame {
        width: calc(50% - 6px) !important;
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    .goods_item .main .item_card_frame .item_card {
        padding: 10px !important;
    }

    /* --- 排序栏 --- */
    .sort .list {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 10px 0 !important;
    }

    .sort .list div {
        padding: 5px 12px !important;
        margin-bottom: 5px;
    }

    /* --- 商品详情页 --- */
    #detail .intro .left {
        max-width: 100% !important;
    }

    #detail .intro .right .sub_title {
        margin-top: 15px !important;
        height: auto !important;
    }

    #detail .intro .right .item_price {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 10px;
    }

    #detail .intro .right .order {
        float: none !important;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    #detail .dc .content .title {
        width: auto !important;
        font-size: 18px !important;
    }

    #detail .dc .content nav {
        width: auto !important;
    }

    /* --- 登录/注册 --- */
    .form .login {
        width: 95% !important;
        max-width: 400px;
    }

    .form .login .login_center {
        width: 90% !important;
    }

    .form .login .login_center .login_submit .submit {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .form .login .login_center .login-info {
        height: auto !important;
        margin: 15px 0 !important;
    }

    .form .login .login_center .login-info .login-info-input {
        width: 100% !important;
        margin-bottom: 8px;
    }

    .form .login .login_center .login-info .send {
        margin-left: 0 !important;
    }

    .top .logo {
        width: 100% !important;
        height: auto !important;
    }

    /* --- 购物车 --- */
    #cart .cart_bg .pre_order .tips {
        width: 100% !important;
    }

    #cart .cart_bg .pre_order .order_div {
        width: 100% !important;
        text-align: center;
    }

    #cart .cart_bg .pre_order .order_div .order_button .order_button_d,
    #cart .cart_bg .pre_order .order_div .order_button .order_button_c {
        width: 100% !important;
    }

    /* --- 个人中心 --- */
    #personal .self-info .intro .info_item span:nth-of-type(1) {
        width: auto !important;
        padding-left: 10px !important;
    }

    #personal .self-info .intro .info_item span:nth-of-type(2) {
        width: auto !important;
        padding-left: 10px !important;
        flex: 1;
    }

    #personal .self-info .intro .info_item span:nth-of-type(3) {
        width: auto !important;
    }

    #personal .self-info .intro .info_item {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        min-height: 40px;
        line-height: 1.4 !important;
        padding: 8px 0 !important;
    }

    /* --- 订单结算 --- */
    .section .settle_content .submmit_button {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .section .settle_content .yfze {
        height: auto !important;
        padding: 10px !important;
    }

    /* --- Footer --- */
    .site-footer .col-article {
        width: 100% !important;
    }

    .site-footer .contact .iconfont {
        display: none !important;
    }

    .footer-links a {
        display: block !important;
        margin-bottom: 5px;
    }

    /* --- 地址卡片 1列 --- */
    .user-address-list .address-item,
    .address-item {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    /* --- 支付列表 1列 --- */
    .payment-list li {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* --- 订单结算 to_left/to_right 内部 --- */
    .section .order-item .to_left h5 .dui {
        padding-left: 20px !important;
    }

    .section .order-item .to_left .updata-1 {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .section .order-item .to_left .updata-2 {
        width: 100% !important;
    }

    /* --- 分页 --- */
    .goods_item .pages .page_wrap .page_span2 {
        margin-right: 10px !important;
    }

    /* --- 订单列表 --- */
    .uc-content-box {
        margin: 0 10px !important;
    }

    .uc-content-box .box-hd .filter-list li {
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .uc-content-box .box-hd .search-form {
        width: 100% !important;
        float: none !important;
        margin-top: 10px;
    }

    .uc-content-box .box-hd .search-text {
        width: calc(100% - 45px) !important;
        right: 39px !important;
    }

    .order-list-box .order-summary {
        padding: 15px 10px 1px !important;
    }

    .order-list-box .order-detail-table td {
        padding: 0 10px !important;
    }

    .order-list-box .order-detail-table th {
        padding: 0 10px 10px !important;
    }

    .order-list-box .goods-list li {
        padding: 10px 10px 10px 80px !important;
    }

    .order-list-box .goods-list .figure-thumb img {
        width: 60px !important;
        height: 60px !important;
    }
}


/* ===== 图片通用自适应 ===== */
@media (max-width: 1225px) {
    img {
        max-width: 100%;
        height: auto;
    }
}


/* ===== 滚动条美化（横滚区域）===== */
@media (max-width: 768px) {
    #cart .cart_bg .list::-webkit-scrollbar,
    .order-list-box::-webkit-scrollbar {
        height: 4px;
    }

    #cart .cart_bg .list::-webkit-scrollbar-thumb,
    .order-list-box::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }
}