/* ================================================================
 * Guwen Modern Theme - City'super 精品超市风格
 * 品牌主色: #316244 深绿
 * 页面底色: #F8F8F8
 * 按钮强调: #242822 黑墨
 * 字体: Noto Sans SC / 系统无衬线
 * ================================================================ */

:root {
    --brand: #316244;
    --brand-hover: #254e36;
    --brand-light: #E1F2DD;
    --ink: #242822;
    --ink-2: #3a3f38;
    --ink-3: #666c63;
    --ink-4: #949a90;
    --border: #E5E5E5;
    --line: #EEEEEE;
    --page: #F8F8F8;
    --card: #FFFFFF;
    --danger: #c62828;
    --warn: #c98a00;
    --ok: #316244;
    --pill: 100px;
}

* { box-sizing: border-box; }

html, body {
    background: var(--page) !important;
    color: var(--ink);
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system,
        BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--ink); }
a { color: var(--ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
.page-width { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container { max-width: 1280px; }
.row { margin: 0; }
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { padding: 0 16px; }

/* ================================================================
 * Header - City'super 单行结构
 * ================================================================ */
.cs-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.cs-header__inner {
    display: flex;
    align-items: stretch;
    gap: 24px;
    height: 72px;
}
.cs-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.cs-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    padding: 6px 12px;
    border-radius: 8px;
    transition: all .15s;
    letter-spacing: 0.03em;
}
.cs-menu-btn:hover {
    background: var(--brand-light);
    color: var(--brand);
}
.cs-menu-btn i { font-size: 20px; }
.cs-logo { display: flex; align-items: center; }
.cs-logo img { height: 32px; width: auto; max-width: none !important; }

/* 分类导航条 */
.cs-nav {
    background: #fff;
    border-top: 1px solid var(--line);
    height: 48px;
    display: flex;
    align-items: center;
}
.cs-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.cs-nav__item {
    position: relative;
}
.cs-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color .15s, background .15s;
    border-bottom: 2px solid transparent;
}
.cs-nav__link:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
.cs-nav__arrow {
    font-size: 12px;
    transition: transform .2s;
}
.cs-nav__item--has-dropdown:hover .cs-nav__arrow {
    transform: rotate(180deg);
}
.cs-nav__dropdown {
    position: absolute;
    top: 48px;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 200;
    padding: 8px 0;
}
.cs-nav__item--has-dropdown:hover > .cs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cs-nav__dropdown-inner {
    display: flex;
    flex-direction: column;
}
.cs-nav__dropdown-link {
    padding: 10px 20px;
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    transition: all .12s;
    border-left: 3px solid transparent;
}
.cs-nav__dropdown-link:hover {
    color: var(--brand);
    background: var(--brand-light);
    border-left-color: var(--brand);
    padding-left: 24px;
}

/* 抽屉隐藏（兼容性） */
.cs-drawer { display: none !important; }

/* 搜索 */
.cs-search {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--page);
    border: 1px solid transparent;
    border-radius: var(--pill);
    overflow: hidden;
    height: 44px;
    transition: all .15s;
}
.cs-search:focus-within {
    border-color: var(--ink);
    background: var(--card);
}
.cs-search__input {
    flex: 1;
    border: none !important;
    outline: none;
    padding: 0 20px;
    font-size: 14px;
    background: transparent;
    color: var(--ink);
    height: 44px;
    box-shadow: none !important;
}
.cs-search__btn {
    width: 44px;
    height: 44px;
    border: none !important;
    background: none !important;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}
.cs-search__btn:hover { color: var(--brand); }

/* 右侧 */
.cs-header__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cs-icon-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all .15s;
    white-space: nowrap;
}
.cs-icon-btn:hover {
    background: var(--brand-light);
    color: var(--brand);
}
.cs-icon-btn i { font-size: 22px; }
.cs-cart-btn { position: relative; }
.cs-cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* 分类抽屉 */
.cs-drawer {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex;
}
.cs-drawer__mask {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
}
.cs-drawer__panel {
    position: relative;
    width: 380px;
    max-width: 90vw;
    background: var(--card);
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.08);
}
.cs-drawer__header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-drawer__header h3 { font-size: 18px; margin: 0; font-weight: 700; }
.cs-drawer__close {
    background: none; border: none; color: var(--ink-3);
    font-size: 24px; padding: 4px;
}
.cs-drawer__close:hover { color: var(--ink); }
.cs-drawer__body { padding: 12px 0; flex: 1; }
.cs-drawer-group { border-bottom: 1px solid var(--line); }
.cs-drawer-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    transition: all .15s;
}
.cs-drawer-parent:hover { background: var(--brand-50); color: var(--brand); }
.cs-drawer-parent i { font-size: 16px; }
.cs-drawer-children { padding: 4px 28px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-drawer-child {
    padding: 6px 14px;
    background: var(--page);
    border-radius: var(--pill);
    font-size: 13px;
    color: var(--ink-3);
    transition: all .15s;
}
.cs-drawer-child:hover { background: var(--brand-light); color: var(--brand); }
.cs-drawer__footer {
    padding: 20px 28px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 24px;
}
.cs-drawer-footer-link {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 500;
}
.cs-drawer-footer-link:hover { color: var(--brand); }

/* ================================================================
 * Banner
 * ================================================================ */
.hero-slider-area {
    background: var(--page) !important;
    padding: 32px 0 48px !important;
}
.hero-slider-area .swiper {
    border-radius: 0;
    overflow: hidden;
}
.hero-slider-area .swiper-slide {
    background-size: cover !important;
    background-position: center !important;
    min-height: 400px;
}

/* ================================================================
 * Section 标题 - City'super 风格
 * ================================================================ */
.section-title {
    text-align: left;
    margin-bottom: 32px !important;
    padding: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
}
.section-title h2 {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--ink) !important;
    margin: 0;
    letter-spacing: -0.01em;
}
.section-title p { color: var(--ink-4); margin-top: 6px; font-size: 13px; }

/* ================================================================
 * 商品卡 - City'super 极简风
 * ================================================================ */
.single-products {
    background: var(--card) !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    transition: all .2s ease;
    margin-bottom: 0 !important;
}
.single-products:hover .product-content .title { color: var(--brand); }
.product-img {
    background: var(--page) !important;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    height: auto !important;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.single-products:hover .product-img img { transform: scale(1.04); }
.product-img .hot {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--ink) !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--pill);
    border: none !important;
    letter-spacing: 0.05em;
}
.product-content {
    background: var(--card) !important;
    padding: 16px 4px 24px !important;
    border-top: none !important;
}
.product-content .title {
    font-size: 13px !important;
    color: var(--ink) !important;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-bottom: 10px;
    transition: color .15s;
}
.product-content .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink) !important;
    margin: 0;
    letter-spacing: -0.01em;
}
.product-content .price small {
    font-size: 13px;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--ink-4) !important;
    margin-left: 8px;
}
.product-content .products-rating { display: none; }
.product-content .add-cart {
    display: none;
}

/* owl-carousel */
.featured-product-wrap .owl-item { width: auto !important; margin-left: 24px !important; }
.featured-product-wrap .owl-item:first-child { margin-left: 0 !important; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--ink) !important; }
.owl-theme .owl-nav [class*='owl-']:hover { background: var(--ink) !important; color: #fff !important; }
.owl-theme .owl-nav [class*='owl-'] {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    width: 40px !important; height: 40px !important;
    line-height: 40px !important; margin: 0 6px !important;
    border: 1px solid var(--line);
    transition: all .15s;
}

/* ================================================================
 * Section 内边距
 * ================================================================ */
.best-seller-area, .hero-slider-area {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
    background: var(--page) !important;
}
.best-seller-area .container,
.hero-slider-area .container { max-width: 1280px; }

/* ================================================================
 * Footer - City'super 深灰底
 * ================================================================ */
.cs-footer {
    background: #242822;
    color: #fff;
    margin-top: 64px;
}
.cs-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 56px 24px 40px;
    max-width: 1280px;
    margin: 0 auto;
}
.cs-footer__brand { padding-right: 24px; }
.cs-footer__logo { height: 32px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.cs-footer__slogan { color: rgba(255,255,255,0.5); font-size: 13px; margin: 0; line-height: 1.6; }
.cs-footer__col h4 {
    font-size: 15px !important;
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.03em;
}
.cs-footer__col ul { list-style: none; padding: 0; margin: 0; }
.cs-footer__col li {
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px;
    margin-bottom: 10px;
    transition: color .15s;
}
.cs-footer__col a { color: rgba(255,255,255,0.5) !important; font-size: 13px; }
.cs-footer__col a:hover { color: #fff !important; }
.cs-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 24px 0;
    text-align: center;
}
.cs-footer__bottom p {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    margin: 0;
}
.cs-footer__bottom a { color: rgba(255,255,255,0.5); }
.cs-footer__bottom a:hover { color: #fff; }

/* 清除旧 footer 样式冲突 */
.footer-area, .copy-right-area { display: none !important; }

/* ================================================================
 * 通用按钮
 * ================================================================ */
.btn-primary {
    background: var(--ink) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pill) !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500;
    transition: background .15s;
}
.btn-primary:hover { background: var(--brand) !important; }

/* ================================================================
 * 登录
 * ================================================================ */
.login-box {
    background: var(--card) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 48px 40px !important;
}
.login-box h2, .login-box h3 { color: var(--ink) !important; font-weight: 700; }
.form_input_div {
    border: 1px solid var(--border) !important;
    border-radius: var(--pill);
    background: var(--card);
    transition: border-color .15s;
    height: auto !important; padding: 0 !important; overflow: hidden;
}
.form_input_div:focus-within { border-color: var(--ink); }
.form_input {
    border: none !important;
    border-radius: var(--pill);
    padding: 14px 20px !important;
    font-size: 14px;
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-family: inherit;
}
.form_input:focus { outline: none; box-shadow: none !important; }
.form_input_code_div {
    display: flex;
    border: 1px solid var(--border) !important;
    border-radius: var(--pill);
    overflow: hidden;
    background: var(--card);
    height: auto !important;
}
.form_input_code_div .form_input { flex: 1; }
.form_input_code_div .code {
    background: var(--ink) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: auto !important;
}
.form_input_code_div .code:hover { background: var(--brand) !important; }

.login_btn, .reg_btn {
    background: var(--ink) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pill) !important;
    padding: 14px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    cursor: pointer;
    height: auto !important;
    transition: background .15s;
}
.login_btn:hover, .reg_btn:hover { background: var(--brand) !important; }

.login-register-tab-list .login_label {
    color: var(--ink-4) !important;
    font-weight: 500;
    font-size: 15px !important;
    padding: 0 28px !important;
    cursor: pointer;
    transition: color .15s;
}
.login-register-tab-list .login_label.active {
    color: var(--ink) !important;
    font-weight: 700;
}

/* ================================================================
 * 商品详情
 * ================================================================ */
.goods-detail-wrap { background: var(--page) !important; padding: 48px 0 !important; }
.goods-info-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 40px;
}
.goods-info-box .goods-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.4;
}
.goods-info-box .price-box {
    background: var(--page);
    border-radius: 0;
    padding: 20px 24px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
}
.goods-info-box .price-box .price {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.goods-info-box .price-box .price-old {
    font-size: 14px;
    color: var(--ink-4);
    text-decoration: line-through;
}
.goods-info-box .attr-item { margin-bottom: 16px; }
.goods-info-box .attr-label { color: var(--ink-3); font-size: 14px; margin-bottom: 8px; }
.goods-info-box .attr-values label {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--border);
    border-radius: var(--pill);
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: all .15s;
    background: var(--card);
    font-weight: 500;
}
.goods-info-box .attr-values label:hover { border-color: var(--ink); }
.goods-info-box .attr-values label.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ================================================================
 * 购物车
 * ================================================================ */
.cart-wrap { background: var(--page); padding: 48px 0; }
.cart-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-top: 2px solid var(--ink);
}
.cart-wrap th {
    background: var(--card);
    color: var(--ink-3);
    font-weight: 500;
    font-size: 13px;
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cart-wrap td {
    padding: 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
    vertical-align: middle;
}
.cart-wrap tr:last-child td { border-bottom: none; }

/* ================================================================
 * 用户中心
 * ================================================================ */
.user-wrap { padding: 48px 0; }
.user-wrap .user-menu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 12px;
}
.user-wrap .user-menu ul li a {
    display: block;
    padding: 12px 20px;
    color: var(--ink-2);
    font-size: 14px;
    border-radius: 0;
    transition: all .15s;
    font-weight: 500;
}
.user-wrap .user-menu ul li a:hover { background: var(--brand-light); color: var(--brand); }
.user-wrap .user-menu ul li a.active { background: var(--ink); color: #fff; }
.user-wrap .user-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 36px;
    min-height: 500px;
}

/* ================================================================
 * 分类页
 * ================================================================ */
.cate-wrap { padding: 48px 0; }
.cate-sidebar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 12px;
}
.cate-sidebar a {
    display: block;
    padding: 10px 16px;
    color: var(--ink-2);
    font-size: 14px;
    border-radius: 0;
    transition: all .15s;
    font-weight: 500;
}
.cate-sidebar a:hover { background: var(--brand-light); color: var(--brand); }
.cate-sidebar a.active { background: var(--ink); color: #fff; }

/* ================================================================
 * 订单页
 * ================================================================ */
.order-wrap { padding: 48px 0; }
.order-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    margin-bottom: 20px;
    overflow: hidden;
}
.order-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-card-body { padding: 24px; }

/* ================================================================
 * 秒杀 banner
 * ================================================================ */
.seckill-banner {
    background: var(--ink) !important;
    border-radius: 0;
    padding: 56px 48px;
    color: #fff;
    margin-bottom: 48px;
}
.seckill-banner h1 { color: #fff !important; font-size: 32px !important; font-weight: 700 !important; }

/* ================================================================
 * 表单
 * ================================================================ */
.form-control {
    border: 1px solid var(--border) !important;
    border-radius: var(--pill) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    transition: border-color .15s;
    box-shadow: none !important;
    background: var(--card);
    color: var(--ink);
    height: auto !important;
}
.form-control:focus { border-color: var(--ink) !important; box-shadow: none !important; outline: none; }

/* ================================================================
 * 状态标签
 * ================================================================ */
.tag { display: inline-block; padding: 3px 14px; border-radius: var(--pill); font-size: 12px; font-weight: 500; }
.tag-success { background: var(--brand-light); color: var(--brand); }
.tag-warning { background: #fff8e1; color: #a06a00; }
.tag-danger { background: #fde8e8; color: var(--danger); }
.tag-info { background: var(--brand-light); color: var(--brand); }
.tag-gray { background: var(--page); color: var(--ink-3); }

/* ================================================================
 * 消息
 * ================================================================ */
.Qmsg-success { background: var(--brand) !important; }
.Qmsg-error { background: var(--danger) !important; }
.Qmsg { font-family: inherit; border-radius: var(--pill) !important; }

/* ================================================================
 * swiper
 * ================================================================ */
.swiper-pagination-bullet-active { background: var(--ink) !important; }

/* ================================================================
 * 响应式
 * ================================================================ */
@media (max-width: 991px) {
    .cs-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px 24px 32px;
    }
    .section-title h2 { font-size: 20px !important; }
    .hero-slider-area { padding: 24px 0 32px !important; }
    .cs-icon-btn span { display: none; }
}
@media (max-width: 767px) {
    .cs-header__inner { height: 60px; gap: 12px; }
    .cs-menu-btn span { display: none; }
    .cs-search__btn { display: none; }
    .cs-logo img { height: 26px; }
    .cs-footer__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-area, .copy-right-area { display: none !important; }
}

/* ========== 首页全部商品（全新独立样式，不依赖旧 owl-carousel） ========== */
.cs-all-goods .cs-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 0 15px;
}
.cs-all-goods .cs-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: .5px;
}
.cs-all-goods .cs-section-more {
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
    transition: opacity .2s;
}
.cs-all-goods .cs-section-more:hover { opacity: .7; }

/* 栅格 — 清除旧 owl/float 干扰 */
.cs-all-goods .cs-goods-grid {
    margin-left: -12px;
    margin-right: -12px;
}
.cs-all-goods .cs-goods-grid > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
    float: none !important;
}

/* 卡片 */
.cs-goods-card {
    display: block;
    background: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.cs-goods-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 图片 — 1:1 正方形，完全可控 */
.cs-goods-img {
    position: relative;
    width: 100%;
    padding-top: 100%;     /* 1:1 比例，比 aspect-ratio 兼容性更好 */
    background: #f0f0f0;
    overflow: hidden;
}
.cs-goods-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.cs-goods-card:hover .cs-goods-img img { transform: scale(1.05); }

/* 信息区 */
.cs-goods-info {
    padding: 12px 14px 14px;
}
.cs-goods-name {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
    min-height: calc(14px * 1.4 * 2);
}
.cs-goods-card:hover .cs-goods-name { color: var(--brand); }

.cs-goods-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}
.cs-goods-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.cs-price-now {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
}
.cs-price-old {
    font-size: 12px;
    color: #bbb;
    text-decoration: line-through;
}

/* ========== 限时秒杀区 ========== */
.cs-seckill-countdown {
    background: linear-gradient(135deg, #242822 0%, #316244 100%);
    color: #fff;
    padding: 36px 24px;
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cs-seckill-countdown::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 60%);
    pointer-events: none;
}
.cs-seckill-tag {
    font-size: 11px;
    letter-spacing: 4px;
    opacity: .7;
    margin-bottom: 10px;
}
.cs-seckill-hour {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 28px;
}
.cs-seckill-tip {
    font-size: 13px;
    opacity: .7;
    margin-bottom: 16px;
}
.cs-seckill-time {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cs-seckill-time .time-box {
    background: rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 56px;
    text-align: center;
}
.cs-seckill-time .time-box span {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    display: block;
    line-height: 1;
}
.cs-seckill-time .time-colon {
    font-size: 24px;
    font-weight: 700;
    opacity: .8;
    margin: 0 2px;
}
.cs-seckill-bar {
    margin-top: 28px;
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
}

/* 秒杀卡片 — 基于 .cs-goods-card 加红色主题 */
.cs-seckill-card { border: 1px solid transparent; }
.cs-seckill-card:hover { border-color: #e74c3c; }
.cs-seckill-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    z-index: 2;
}
.cs-seckill-price { color: #e74c3c !important; }
.cs-seckill-progress {
    margin: 10px 0;
}
.cs-seckill-bar-track {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}
.cs-seckill-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #e74c3c);
    border-radius: 3px;
    transition: width .3s;
}
.cs-seckill-progress-text {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}
.cs-seckill-btn {
    background: #e74c3c;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition: background .2s;
}
.cs-seckill-card:hover .cs-seckill-btn { background: #c0392b; }

/* ========== 分类页 / 全部商品页 ========== */
/* 面包屑 */
.cs-breadcrumb {
    background: #fff;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #666;
}
.cs-breadcrumb a { color: #666; text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--brand); }
.cs-breadcrumb .sep { margin: 0 8px; color: #ccc; }
.cs-breadcrumb .current { color: var(--ink); font-weight: 500; }

/* 左侧分类侧边栏 */
.cs-cate-sidebar {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 88px;
}
.cs-cate-sidebar__header {
    background: var(--brand);
    color: #fff;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}
.cs-cate-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.cs-cate-sidebar__list > li > a {
    display: block;
    padding: 10px 20px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.cs-cate-sidebar__list > li > a:hover {
    color: var(--brand);
    background: var(--brand-light);
}
.cs-cate-sidebar__list > li.active > a {
    color: var(--brand);
    border-left-color: var(--brand);
    background: var(--brand-light);
}
.cs-cate-sidebar__sublist {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px 0;
}
.cs-cate-sidebar__sublist li a {
    display: block;
    padding: 7px 20px 7px 40px;
    color: #666;
    font-size: 13px;
    text-decoration: none;
    transition: all .2s;
}
.cs-cate-sidebar__sublist li a:hover { color: var(--brand); }
.cs-cate-sidebar__sublist li.active a {
    color: var(--brand);
    font-weight: 600;
}

/* 工具栏 */
.cs-cate-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.cs-cate-toolbar__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}
.cs-cate-toolbar__sort a {
    display: inline-block;
    padding: 6px 14px;
    margin-left: 4px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border-radius: 100px;
    transition: all .2s;
}
.cs-cate-toolbar__sort a:hover { color: var(--brand); }
.cs-cate-toolbar__sort a.active {
    background: var(--brand);
    color: #fff;
}

/* 空状态 */
.cs-empty {
    text-align: center;
    padding: 80px 20px;
}

/* 分页 */
.cs-pagination {
    margin-top: 40px;
    text-align: center;
}
.cs-pagination .pagination,
.cs-pagination .layui-laypage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cs-pagination a,
.cs-pagination .layui-laypage a,
.cs-pagination .layui-laypage span {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #eee;
    transition: all .2s;
}
.cs-pagination a:hover,
.cs-pagination .layui-laypage a:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.cs-pagination .current,
.cs-pagination .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand);
}
.cs-pagination .layui-laypage-skip { display: none; }

/* 响应式 */
@media (max-width: 991px) {
    .cs-cate-sidebar { position: static; margin-bottom: 20px; }
    .cs-cate-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ========== 商品卡片底部 + 加购按钮 ========== */
.cs-goods-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 8px;
}
.cs-goods-meta {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}
.cs-add-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    text-decoration: none;
    line-height: 1.4;
}
.cs-add-cart-btn:hover { background: #26523a; color: #fff; text-decoration: none; }
.cs-add-cart-btn .iconfont { font-size: 14px; }
.cs-add-cart-btn--link {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}
.cs-add-cart-btn--link:hover { background: var(--brand); color: #fff; }

/* ========== Toast 提示 ========== */
.cs-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(36, 40, 34, 0.92);
    color: #fff;
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all .25s ease;
    pointer-events: none;
}
.cs-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.cs-toast--success { background: var(--brand); }
.cs-toast--error { background: #e74c3c; }

/* ========== 分页增强（覆盖 thinkPHP render 的 Bootstrap 输出） ========== */
.cs-pagination .pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-pagination .pagination li {
    display: inline-block;
}
.cs-pagination .pagination li a,
.cs-pagination .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background: #fff;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all .2s;
    box-shadow: none;
}
.cs-pagination .pagination li a:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    text-decoration: none;
}
.cs-pagination .pagination li.active span {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.cs-pagination .pagination li.disabled span {
    background: #f5f5f5;
    color: #bbb;
    cursor: not-allowed;
}

/* ========== 瀑布流布局（CSS Grid 自适应填充） ========== */
.cs-waterfall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
@media (max-width: 1199px) {
    .cs-waterfall { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 767px) {
    .cs-waterfall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ========== 售罄状态 ========== */
.cs-goods-card.cs-sold-out {
    opacity: 0.72;
}
.cs-goods-card.cs-sold-out .cs-goods-info {
    color: #999;
}
.cs-sold-out .cs-price-now {
    color: #999 !important;
    text-decoration: line-through;
}
/* 售罄遮罩 */
.cs-sold-out .cs-goods-img {
    position: relative;
}
.cs-sold-out__mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 12px 0 0;
}
.cs-sold-out__label {
    display: inline-block;
    background: #fff;
    color: #666;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 100px;
    letter-spacing: 2px;
}
/* 售罄按钮禁用 */
.cs-add-cart-btn--disabled {
    background: #ccc !important;
    color: #fff !important;
    cursor: not-allowed;
    border-color: #ccc !important;
    pointer-events: none;
}
.cs-add-cart-btn--disabled:hover {
    background: #ccc !important;
}

/* ========== 首页全屏轮播 ========== */
.hero-slider-area,
.hero-slider-area.hero-slider-area-style-two {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 72px) !important;
    min-height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #000 !important;
}
.hero-slider-area .slider {
    width: 100% !important;
    height: 100% !important;
    position: relative;
}
.hero-slider-area .swiper {
    width: 100% !important;
    height: 100% !important;
}
.hero-slider-area .swiper-slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
}
.hero-slider-area .swiper-pagination {
    bottom: 30px !important;
}
.hero-slider-area .swiper-pagination-bullet {
    width: 28px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.5) !important;
    opacity: 1 !important;
}
.hero-slider-area .swiper-pagination-bullet-active {
    background: var(--brand) !important;
    width: 40px !important;
}
.hero-slider-area .swiper-button-prev,
.hero-slider-area .swiper-button-next {
    color: #fff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 100px;
    background: rgba(0,0,0,0.3);
    transition: background .2s;
}
.hero-slider-area .swiper-button-prev:hover,
.hero-slider-area .swiper-button-next:hover {
    background: var(--brand);
}
.hero-slider-area .swiper-button-prev::after,
.hero-slider-area .swiper-button-next::after {
    font-size: 20px !important;
}

/* ========== Header 购物车图标兜底 ========== */
.cs-header__right .cs-cart-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--ink) !important;
    text-decoration: none;
}
.cs-header__right .cs-cart-btn .iconfont,
.cs-header__right .cs-cart-btn i.iconfont {
    font-family: "iconfont" !important;
    font-size: 22px !important;
    color: var(--ink) !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}
.cs-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-radius: 100px;
    padding: 0 5px;
    box-sizing: border-box;
}

/* ========== 线下转账弹窗样式（订单页 + 用户中心共用） ========== */
.offline-transfer-box {
    padding: 20px 25px;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.offline-transfer-box .header {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.offline-transfer-box .goods-title {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin-bottom: 5px;
}
.offline-transfer-box .order-price {
    font-size: 20px;
    font-weight: 600;
    color: #E9332D;
    text-align: center;
    margin-bottom: 18px;
}
.offline-transfer-box .otf-bank-info {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.offline-transfer-box .otf-bank-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px dashed #e8e8e8;
}
.offline-transfer-box .otf-bank-row:last-child {
    border-bottom: none;
}
.offline-transfer-box .otf-label {
    color: #888;
    width: 80px;
    flex-shrink: 0;
}
.offline-transfer-box .otf-value {
    color: #333;
    font-weight: 500;
    flex: 1;
    word-break: break-all;
}
.offline-transfer-box .otf-copy-btn {
    margin-left: 10px;
    padding: 3px 10px;
    font-size: 12px;
    color: #fff;
    background: #E9332D;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}
.offline-transfer-box .otf-copy-btn:hover {
    background: #d02a22;
}
.offline-transfer-box .otf-upload {
    margin-bottom: 18px;
}
.offline-transfer-box .otf-upload-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}
.offline-transfer-box .otf-upload-area {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.offline-transfer-box .otf-upload-btn {
    width: 100px;
    height: 80px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}
.offline-transfer-box .otf-upload-btn:hover {
    border-color: #E9332D;
    color: #E9332D;
    background: #fff;
}
.offline-transfer-box .otf-upload-btn i {
    font-size: 28px;
    margin-bottom: 4px;
}
.offline-transfer-box .otf-preview {
    position: relative;
    width: 100px;
    height: 80px;
    flex-shrink: 0;
}
.offline-transfer-box .otf-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}
.offline-transfer-box .otf-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #E9332D;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.offline-transfer-box .otf-remark {
    width: 100%;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    resize: none;
    height: 50px;
    box-sizing: border-box;
    font-family: inherit;
}
.offline-transfer-box .otf-remark:focus {
    outline: none;
    border-color: #E9332D;
}
.offline-transfer-box .otf-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.offline-transfer-box .otf-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.offline-transfer-box .otf-btn-secondary {
    background: #f5f5f5;
    color: #666;
}
.offline-transfer-box .otf-btn-secondary:hover {
    background: #e8e8e8;
}
.offline-transfer-box .otf-btn-primary {
    background: #E9332D;
    color: #fff;
}
.offline-transfer-box .otf-btn-primary:hover {
    background: #d02a22;
}

/* ================================================================
 * 响应式增强层（移动端 / 平板自适应）
 * 覆盖断点：≤991px 平板；≤767px 手机；≤575px 小屏手机
 * 注意：user.css 在 modern.css 之后加载，用户中心固定宽度需用 !important 覆盖
 * ================================================================ */

/* ---------- 基础容器 ---------- */
@media (max-width: 991px) {
    .page-width { padding: 0 16px; }
    .container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* ---------- 头部：手机隐藏横向分类导航，显示汉堡 ---------- */
.cs-menu-btn { display: none; }
@media (max-width: 767px) {
    .cs-menu-btn { display: flex; }
    .cs-nav { display: none; }
    .cs-header__inner { gap: 10px; }
    .cs-search { min-width: 0; flex: 1 1 auto; }
    .cs-search__input { padding: 0 12px; }
    .cs-logo img { height: 26px; }
    .cs-icon-btn { padding: 8px 10px; }
    .cs-icon-btn span { display: none; }
    .cs-header__right { gap: 0; }
}
@media (max-width: 575px) {
    .cs-header__inner { gap: 8px; }
    .cs-menu-btn span { display: none; }
    .cs-logo img { height: 24px; }
}

/* ---------- 移动分类抽屉 ---------- */
.cs-drawer { display: none; }
.cs-drawer.is-open { display: flex !important; }
.cs-drawer__panel { width: 86%; max-width: 360px; }
@media (max-width: 767px) {
    .cs-drawer__header { padding: 20px 22px; }
    .cs-drawer__body { padding: 8px 0; }
    .cs-drawer-parent { padding: 14px 22px; font-size: 15px; }
    .cs-drawer-children { padding: 4px 22px 14px; }
}

/* ---------- 首页轮播高度（手机不宜过高） ---------- */
@media (max-width: 767px) {
    .hero-slider-area,
    .hero-slider-area.hero-slider-area-style-two {
        height: 190px !important;
        min-height: 190px !important;
    }
    .hero-slider-area .swiper-slide { min-height: 190px !important; }
    .hero-slider-area { padding: 0 !important; }
}

/* ---------- 首页“全部商品”网格：手机 2 列 ---------- */
@media (max-width: 575px) {
    .cs-all-goods .cs-goods-grid { margin-left: -8px; margin-right: -8px; }
    .cs-all-goods .cs-goods-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 16px;
    }
    .section-title h2 { font-size: 19px !important; }
}

/* ---------- 分类页侧栏：手机横向滚动 ---------- */
@media (max-width: 767px) {
    .cs-cate-sidebar {
        box-shadow: none;
        padding: 0;
        border: none;
        background: transparent;
    }
    .cs-cate-sidebar__header { display: none; }
    .cs-cate-sidebar__list {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 4px 0 8px;
        -webkit-overflow-scrolling: touch;
    }
    .cs-cate-sidebar__list > li { margin: 0; }
    .cs-cate-sidebar__list > li > a {
        padding: 8px 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 100px;
        white-space: nowrap;
    }
    .cs-cate-sidebar__sublist { display: none; }
    .cs-cate-sidebar__list > li.active > a {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
    }
    .cs-cate-toolbar { padding: 14px 16px; }
}

/* ---------- 商品详情：手机堆叠（goods.css 后加载，覆盖需 !important） ---------- */
@media (max-width: 767px) {
    .goods-detail-wrap { padding: 20px 0 !important; }
    .goods-info-box { padding: 20px !important; }
    /* 主图容器与图片：380px 固定 → 全宽自适应 */
    .carousel {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }
    .carousel img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
    /* 缩略图条：横向滚动 */
    .goods-imgs { height: auto !important; overflow-x: auto; }
    .goods-info-box .goods-name { font-size: 18px; }
    .goods-info-box .price-box .price { font-size: 26px; }
    /* 价格条：手机保持 6:4 并排，避免重叠 */
    .money .col-md-8,
    .money .col-md-2 {
        max-width: none !important;
        flex-basis: auto !important;
    }
    .money .col-md-8 { flex: 1 1 60% !important; }
    .money .col-md-2 { flex: 0 0 40% !important; }
    /* 右侧推荐栏：堆叠到下方且取消固定 1200px 高度 */
    .col-md-2.box-right-height {
        height: auto !important;
        margin-bottom: 0 !important;
        margin-top: 24px !important;
        padding: 16px !important;
    }
    /* 购买按钮：全宽竖排 */
    .buy-num { margin-top: 24px; }
    .goods-btn {
        width: 100% !important;
        display: block !important;
    }
    .goods-btn + .goods-btn {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
}

/* ---------- 购物车：手机行卡片化 ---------- */
@media (max-width: 767px) {
    .cart-header-row { display: none; }
    .cart-content .row-content {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 6px 12px;
        align-items: start;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
        background: #fff;
    }
    .cart-content .row-content [class*="col-lg-"] { padding: 0 !important; height: auto !important; }
    .cart-content .row-content .goods-info {
        grid-row: 1 / span 6;
        display: flex;
        align-items: flex-start;
    }
    .cart-content .row-content .goods-info img {
        width: 72px !important;
        height: 72px !important;
        object-fit: cover;
        border-radius: 8px;
    }
    .cart-content .cart-price,
    .cart-content .total_amount { font-weight: 700; color: var(--ink); }
    .cart-content .col-lg-3 { font-size: 13px; }
    .info-box { margin-top: 20px; }
    .settlement { width: 100%; text-align: center; }
}

/* ---------- 用户中心：手机堆叠（覆盖 user.css 固定宽度） ---------- */
@media (max-width: 991px) {
    .user_container { width: 100% !important; padding: 0 16px; min-height: auto; }
    .user_content .menu { width: 100% !important; float: none !important; margin-bottom: 16px; }
    .content_detail { width: 100% !important; float: none !important; margin-left: 0 !important; }
}
@media (max-width: 767px) {
    .uc-box .filter-list {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        white-space: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .uc-box .filter-list li {
        padding: 6px 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 100px;
    }
    .uc-box .filter-list li.first { border-left: 1px solid var(--line); }
    .search-form { display: flex; gap: 8px; }
    .search-form .search-text { flex: 1; min-width: 0; }
    .uc-box { padding: 0 4px; }
    .content_detail { padding: 16px !important; }
}

/* ---------- 订单表：手机卡片化 ---------- */
@media (max-width: 767px) {
    .order-detail-table thead { display: none; }
    .order-detail-table,
    .order-detail-table tbody,
    .order-detail-table tr,
    .order-detail-table td { display: block; width: 100% !important; }
    .order-detail-table tr {
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-bottom: 14px;
        overflow: hidden;
        background: #fff;
    }
    .order-detail-table td { padding: 12px 14px !important; border: none; }
    .order-detail-table .order-items .goods-list li {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .order-detail-table .order-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }
    .uc-order-item { padding: 0 !important; border: none !important; }
}

/* ---------- 登录/注册/忘记密码：手机自适应（覆盖 login.css 固定宽度） ---------- */
@media (max-width: 1023px) {
    /* 平板/手机：隐藏左侧固定 375px 的蓝色 banner，避免挤压表单 */
    .login-box .banner { display: none !important; }
    .login-content-box { width: 100% !important; height: auto !important; min-height: 100vh; }
}
@media (max-width: 767px) {
    .login-box {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
        background: var(--page) !important;
    }
    .login-content-box { box-sizing: border-box; padding: 24px 16px; }
    .login-box .header { height: auto; }
    .login-box .logo { width: auto; padding: 8px 0 16px; }
    .login-form {
        width: 100% !important;
        max-width: 420px;
        margin: 24px auto !important;
        padding: 24px 20px !important;
        box-sizing: border-box;
    }
    .login_form_box, .reg_form_box {
        height: auto;
        margin-top: 32px;
        box-sizing: border-box;
    }
    .form_input_div, .form_input_code_div { width: 100% !important; box-sizing: border-box; }
    .form_input { width: 100% !important; box-sizing: border-box; }
    .form_input_code_div .form_input { width: auto !important; min-width: 0; }
    .login_btn, .reg_btn, .user_login_submit { width: 100% !important; box-sizing: border-box; }
    .user_word {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 !important;
        text-align: left;
    }
    .login-tool { box-sizing: border-box; padding: 0; }
    .footer { padding: 0 0 24px; }
}

/* ---------- 秒杀：手机内边距 ---------- */
@media (max-width: 767px) {
    .seckill-banner { padding: 32px 20px !important; }
    .seckill-banner h1 { font-size: 24px !important; }
    .cs-seckill-countdown { min-height: 260px; padding: 28px 16px; }
}

/* ---------- 通用：面包屑 / 页脚微调 ---------- */
@media (max-width: 575px) {
    .cs-breadcrumb { padding: 10px 0; font-size: 12px; }
    .cs-footer__inner { padding: 32px 16px 24px; }
    .cs-footer__bottom p { font-size: 11px; }
}

/* ---------- 返回顶部按钮位置（避免遮挡） ---------- */
@media (max-width: 767px) {
    .go-top { right: 12px; bottom: 12px; }
}

/* ================================================================
 * 移动端综合补丁 —— 覆盖 style.css 残留 fixed-width 和遗漏组件
 * ================================================================ */

/* ---------- Footer：PC 4 列 → 手机堆叠 ---------- */
@media (max-width: 767px) {
    .cs-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 32px 16px 24px;
    }
    .cs-footer__brand { grid-column: 1 / -1; padding-right: 0; }
    .cs-footer__logo { height: 28px; }
    .cs-footer__col h4 { font-size: 14px !important; margin-bottom: 12px !important; }
    .cs-footer__col li { font-size: 12px; margin-bottom: 6px; }
    .cs-footer__col a { font-size: 12px; }
    .cs-footer__bottom { padding: 16px 0; }
}
@media (max-width: 480px) {
    .cs-footer__inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- style.css 旧组件 fixed-width 覆盖 ---------- */
@media (max-width: 767px) {
    /* 旧首页轮播 1296px */
    .slider { width: 100% !important; height: auto !important; }
    /* 旧秒杀卡片 306px */
    .seckill-data { width: 100% !important; max-width: 320px; margin: 0 auto; }
    .single-products.deals-products .product-img { width: 100% !important; height: auto; padding-bottom: 65%; }
    /* 旧 news_card 386px */
    .news_card { width: 100% !important; max-width: 360px; margin: 0 auto; height: auto; }
    .news_card_header { width: 100% !important; height: 180px; }
    /* 旧产品列表 */
    .product-content, .single-products { width: 100% !important; }
}

/* ---------- header_no_nav 页面（购物车/登录）面包屑条 ---------- */
@media (max-width: 767px) {
    .bar { height: auto !important; min-height: 32px; padding: 6px 0; }
    .bar-div { height: auto !important; line-height: 1.5; padding: 0 16px; font-size: 12px; }
}

/* ---------- 分类详情/购物车：Bootstrap row 内联 padding 清理 ---------- */
@media (max-width: 767px) {
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    .col-lg-2, .col-lg-3, .col-lg-5, .col-lg-8, .col-lg-9,
    .col-lg-1, .col-lg-4, .col-lg-6, .col-lg-7, .col-lg-10, .col-lg-11,
    .col-md-2, .col-md-3, .col-md-5, .col-md-8, .col-md-9 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ---------- 商品详情页 tab 内容手机堆叠 ---------- */
@media (max-width: 767px) {
    .goods-detail .col-md-2,
    .goods-detail .col-md-5,
    .goods-detail .col-md-7 {
        width: 100% !important;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- 订单提交成功 / 结算页：去掉 col-lg-3 固定宽度 ---------- */
@media (max-width: 767px) {
    .cart-detail .col-lg-8,
    .cart-detail .col-lg-3 {
        width: 100% !important;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0 !important;
    }
    .cart-detail { padding: 12px !important; }
    .info-box { margin-left: 0 !important; height: auto !important; padding: 24px !important; box-shadow: none !important; }
}

/* ---------- address / 订单列表表格 → 卡片 ---------- */
@media (max-width: 767px) {
    .user-content table,
    .user-content thead,
    .user-content tbody,
    .user-content th,
    .user-content td,
    .user-content tr { display: block; width: 100%; }
    .user-content thead { display: none; }
    .user-content tr {
        margin-bottom: 12px;
        background: #fff;
        border-radius: 10px;
        padding: 12px;
        border: 1px solid var(--line);
    }
    .user-content td {
        border: none !important;
        padding: 4px 0 !important;
        text-align: left !important;
        font-size: 13px;
    }
}

/* ---------- 用户中心：订单卡片手机细节修正（覆盖 user.css 固定宽度） ---------- */
@media (max-width: 767px) {
    .user_order_list { margin-top: 24px; }
    .order-summary { padding: 16px 14px 8px; }
    .uc-order-item .order-remove { top: 10px; right: 10px; }
    .order-detail-table td { padding: 0 14px !important; }
    .order_text { width: auto !important; flex: 1; min-width: 0; padding-left: 0 !important; }
    .order-detail-table .order-actions { padding: 10px 14px !important; }
    .order-actions a, .order-actions span { margin-left: auto !important; margin-right: 0; }
    /* 底部操作条：按钮改为 flex 换行右对齐 */
    .order-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
    .order-bar a { float: none !important; margin: 0 !important; }
    .order-bar > span { flex: 1 1 100%; text-align: left; }
    /* 搜索框：absolute → 正常 flex 流，避免错位 */
    .search-form { float: none !important; width: 100% !important; }
    .search-text { position: static !important; }
    .search_btn { position: static !important; }
    #pages { float: none !important; text-align: center; margin: 16px 0; }
}

/* ---------- 首页用户菜单弹层 ---------- */
@media (max-width: 767px) {
    .user_menu { position: static !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 8px 0; }
    .user_menu li { border-bottom: 1px solid var(--line); padding: 12px 0; }
}

/* ---------- 下单页：手机自适应（覆盖 order.css 固定宽度） ---------- */
@media (max-width: 767px) {
    .order_container {
        width: 100% !important;
        min-height: auto;
        margin: 0;
        padding-bottom: 16px;
    }
    .checkout-detail { padding: 24px 0 0; }
    .checkout-detail .detail-section { padding: 0 16px; }
    .checkout-detail .address-header { margin-left: 16px; }

    /* 地址卡片：全宽堆叠 */
    .address-list { padding: 16px; }
    .address-list .address-item {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* 商品行：图片 + 名称自适应，价格换行 */
    .goods-list .good-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 4px;
    }
    .goods-list .good-item .good-img {
        width: 48px !important;
        height: 48px !important;
        margin: 0 10px 0 0;
    }
    .goods-list .good-item .good-img img { width: 100%; height: 100%; object-fit: cover; }
    .goods-list .good-item .good-name {
        width: auto !important;
        flex: 1;
        min-width: 0;
        height: auto !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    .goods-list .good-item .price-box {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-left: 58px;
        height: auto !important;
    }
    .goods-list .good-item .good-price,
    .goods-list .good-item .good-status,
    .goods-list .good-item .good-total {
        width: auto !important;
        text-align: left !important;
    }

    /* 优惠券 / 支付方式：选项自适应换行 */
    .checkout-detail .detail-section .section-options { padding: 16px 0; }
    .checkout-detail .detail-section .section-options .options-header { width: auto !important; }
    .checkout-detail .detail-section .section-options .options-list {
        width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        height: auto !important;
        position: relative;
    }
    .checkout-detail .detail-section .section-options .options-list .options-item { margin-right: 0; }
    .options-body { height: auto !important; }

    /* 结算单：取消右浮动与固定内边距 */
    .checkout-detail .count-detail {
        float: none !important;
        margin: 0 16px !important;
        min-width: 0;
        padding: 20px 0;
    }
    .checkout-detail .count-detail .section-bill .bill-item { padding-left: 0 !important; text-align: right; }
    .checkout-detail .count-detail .section-bill .bill-item .bill-name {
        position: static !important;
        display: inline-block;
        width: auto !important;
        margin-right: 12px;
    }

    /* 底部提交区：全宽按钮 */
    .checkout-detail .footer-detail {
        padding: 16px !important;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .checkout-detail .footer-detail .footer-address { float: none !important; width: 100%; }
    .submit-order {
        float: none !important;
        width: 100% !important;
        height: 44px;
        line-height: 44px;
    }
}

/* ---------- layui layer 弹窗：手机自适应（支付/转账/地址/优惠券） ---------- */
/* 修复：层内嵌 display:none 的支付/转账内容，移入弹层后强制显示 */
.layui-layer-content > #pay-box,
.layui-layer-content > #offline-transfer-box,
.layui-layer-content > .pay-box {
    display: block !important;
}

@media (max-width: 767px) {
    .layui-layer-page,
    .layui-layer-dialog {
        width: 92% !important;
        max-width: 92vw;
        left: 4% !important;
        margin-left: 0 !important;
    }
    .layui-layer-page .layui-layer-content,
    .layui-layer-dialog .layui-layer-content {
        max-height: 76vh;
        overflow-y: auto;
    }
    .layui-layer iframe { width: 100% !important; }
}

/* ========== 独立支付页（/index/order/pay） ========== */
.order-pay-wrap {
    max-width: 640px;
    margin: 30px auto;
    padding: 0 16px;
}
.order-pay-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    padding: 28px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.order-pay-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
.order-pay-info {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.order-pay-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.order-pay-info .info-label { color: #888; white-space: nowrap; margin-right: 12px; }
.order-pay-info .info-value { color: #333; word-break: break-all; text-align: right; }
.order-pay-info .info-price { color: #E9332D; font-size: 18px; font-weight: 600; }
.otf-page .otf-bank-info { margin-bottom: 18px; }
.otf-page .otf-upload { margin-bottom: 18px; }
.qrcode-page { text-align: center; padding: 10px 0; }
.qrcode-page .qrcode-box {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 16px;
}
.qrcode-page .qrcode { width: 250px; height: 250px; margin: 0 auto; }
.qrcode-page .qrcode canvas, .qrcode-page .qrcode img { width: 250px !important; height: 250px !important; }
.qrcode-page .qrcode-fail { width: 250px; height: 250px; line-height: 250px; color: #999; border: 1px dashed #ddd; border-radius: 8px; margin: 0 auto; }
.qrcode-page .qrcode-tip { color: #999; font-size: 13px; margin-bottom: 20px; }
.qrcode-page .qrcode-btn {
    display: inline-block;
    padding: 10px 32px;
    background: #E9332D;
    color: #fff !important;
    border-radius: 22px;
    cursor: pointer;
    font-size: 15px;
}
@media (max-width: 767px) {
    .order-pay-wrap { margin: 16px auto; }
    .order-pay-card { padding: 20px 14px; }
    .qrcode-page .qrcode { width: 100%; height: auto; }
    .qrcode-page .qrcode canvas, .qrcode-page .qrcode img { width: 220px !important; height: 220px !important; }
}