/* ===================================================================
=== 1. 全局设置 & 基础变量 (Global & Basics) ===
=================================================================== 
*/
:root {
    --tb-orange: #ff5000;
    --tb-red: #ff0036;
    --bg-gray: #f4f4f4;
    --tb-grad: linear-gradient(135deg, #ff9000, #ff5000); /* 淘宝橙色渐变 */
}

body { 
    background-color: #f4f4f4; 
    background-color: var(--bg-gray); 
    font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; 
    /* 页脚吸底功能：Flex布局 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { text-decoration: none; color: #333; transition: color 0.2s; }
a:hover { color: var(--tb-orange); }

/* 通用布局修正 */
#global-footer { margin-top: auto; width: 100%; }
header, .tb-header, .mobile-header, .container, .main-content { flex-shrink: 0; }
#main-content-row { margin-bottom: 30px; } /* 主体底部留白 */

/* ===================================================================
=== 2. PC端样式 (Desktop Styles) ===
=================================================================== 
*/

/* --- 2.1 顶部导航栏 (62px) --- */
.tb-header {
    background: #fff;
    height: 62px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-brand {
    font-size: 22px;
    font-weight: bold;
    color: var(--tb-orange);
    margin-right: 40px;
    display: flex; align-items: center;
}
.site-brand i { margin-right: 8px; font-size: 24px; }

.main-nav { display: flex; flex: 1; align-items: center; }
.nav-link-item { 
    font-size: 14px; font-weight: 500; color: #333; margin-right: 25px;
}
.nav-link-item:last-child { margin-right: 0; }
.nav-link-item:hover { color: var(--tb-orange); }

/* --- 2.2 搜索与登录 --- */
.header-right { display: flex; align-items: center; }
.tb-search-group {
    display: flex; align-items: center;
    border: 2px solid var(--tb-red);
    border-radius: 20px;
    overflow: hidden;
    width: 280px;
    height: 36px;
    background: #fff;
    margin-right: 15px; 
}
.tb-search-input {
    border: none; outline: none; padding: 0 15px;
    flex: 1; font-size: 13px; width: 100%; background: transparent;
}
.tb-search-btn {
    background: var(--tb-red); color: white; border: none;
    padding: 0 20px; font-weight: bold; font-size: 14px;
    cursor: pointer; border-radius: 18px; margin: 2px; height: 28px;
}
.tb-search-btn:hover { background: #d6002a; }

.btn-login {
    color: var(--tb-red); border: 1px solid var(--tb-red);
    padding: 4px 15px; border-radius: 6px; font-size: 14px; background: #fff;
}
.btn-login:hover { background: #fff0f0; color: var(--tb-red); }

/* --- 2.3 模块容器与标题 --- */
.module-box {
    background: #fff; border-radius: 5px; padding: 15px; margin-bottom: 15px;
}
.module-title {
    font-size: 16px; font-weight: bold;
    border-left: none; 
    padding-left: 14px; 
    margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
    position: relative; 
}
.module-title::before {
    border-radius: 12px; content: ""; position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 1em; background-color: var(--tb-orange);
}
.module-title a { font-size: 12px; font-weight: normal; color: #999; }

/* --- 2.4 分类导航 (Category Bar) --- */
.category-bar { display: flex; flex-wrap: wrap; }
.cat-pill {
    display: inline-flex; align-items: center;
    padding: 4px 12px 4px 8px;
    background: #f5f5f5; border-radius: 20px;
    font-size: 13px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.2s;
    margin-right: 8px; margin-bottom: 8px;
}
.cat-pill.active, .cat-pill:hover {
    background: #fff3eb; color: var(--tb-orange); border-color: var(--tb-orange);
}
.cat-pill img {
    width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; object-fit: cover;
}

/* --- 2.5 商品网格布局 (修复 gap 兼容性) --- */
.taobao-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px; /* 抵消子元素的 margin */
}

/* 商品卡片基础 */
.tb-card {
    background: #fff;
    border-radius: 4px;
    transition: all 0.2s;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    /* PC端宽度计算：4列布局，使用 margin 代替 gap */
    width: calc(25% - 50px); 
    margin: 0 5px 10px 5px;
}
.tb-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

/* 图片区域 */
.tb-img-wrap { width: 100%; padding-bottom: 100%; position: relative; background: #f9f9f9; }
.tb-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* PC端图片微调 */
@media (min-width: 992px) {
    .tb-img {width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;  border-radius: 8px;}
    .tb-img-wrap { width: 65%; padding-bottom: 65%; margin: 10% auto; border: 1px solid #eee; border-radius: 8px; }
    .sidebar-inner { padding-bottom: 1px; } 
}

/* 信息区域 */
.tb-info { padding: 10px; display: flex; flex-direction: column; flex-grow: 1; }

.tb-title { 
    font-size: 13px; 
    height: 38px; 
    overflow: hidden; 
    margin-bottom: 3px; 
    line-height: 1.4; 
    color: #333; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    word-break: break-all; 
}

.tb-price-row { 
    display: flex; justify-content: space-between; align-items: flex-end; 
    margin-top: auto; padding-top: 5px; flex-wrap: nowrap;
}
.tb-price { color: var(--tb-orange); font-weight: bold; font-size: 20px; }
.tb-price small { font-size: 13px; margin-right: 1px;}
.tb-sales { font-size: 12px; color: #999; text-align: right; white-space: nowrap; flex-shrink: 0; margin-bottom: 3px; }

.tb-tags-row {
    height: auto; min-height: 16px; overflow: hidden;
    margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap;
}
.dynamic-tag {
    margin-bottom: 2px; display: inline-block; font-size: 11px;
    padding: 0px 2px; border-radius: 3px; margin-right: 3px;
    line-height: normal; border: 1px solid transparent; white-space: nowrap;
}

/* --- 2.6 右侧模块 (热门文章/标签/通知) --- */
.notice-content { font-size: 13px; line-height: 1.6; color: #666; }

.top-item { display: flex; margin-bottom: 12px; align-items: center; }
.top-img { 
    width: 45px; height: 45px; border-radius: 4px; object-fit: cover; 
    border: 1px solid #eee; margin-right: 10px; 
}
.top-info { flex: 1; overflow: hidden; }
.top-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.top-price { color: var(--tb-orange); font-weight: bold; font-size: 14px; }

.hot-article-item {
    display: flex; justify-content: space-between; padding: 8px 0;
    border-bottom: 1px dashed #eee;
}
.hot-article-item:last-child { border-bottom: none; }
.hot-rank {
    display: inline-block; width: 18px; height: 18px;
    background: #ccc; color: #fff; text-align: center; line-height: 18px;
    border-radius: 4px; font-size: 12px; margin-right: 8px;
}
.hot-rank.top-3 { background: var(--tb-orange); }

/* 热门文章链接 */
#hot-articles-list a {
    font-size: 14px !important; transition: all 0.2s ease; text-decoration: none;
}
#hot-articles-list a:hover {
    color: var(--tb-orange) !important; padding-left: 5px;
}
.hot-rank-badge {
    display: inline-block; width: 20px; height: 20px; line-height: 20px;
    text-align: center; border-radius: 4px; color: #fff; font-size: 12px;
    font-weight: bold; margin-right: 8px; flex-shrink: 0;
}
.rank-1 { background-color: #ff0036; }
.rank-2 { background-color: #ff5000; }
.rank-3 { background-color: #ff9000; }
.rank-4 { background-color: #19be6b; }
.rank-5 { background-color: #409eff; }

.art-cat-list a { 
	position: relative; padding-left: 13px !important; display: block; 
	padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; 
}
.art-cat-list a:hover { color: var(--tb-orange); }
.art-cat-list a:before {
    content: ""; position: absolute; left: 0; top: 55%; transform: translateY(-50%);
    width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid #ccc;
}

.tag-cloud { display: flex; flex-wrap: wrap; }
.tag-cloud-item {
    font-size: 13px; padding: 3px 8px; background: #f8f9fa;
    border: 1px solid #eee; border-radius: 15px; color: #666;
    cursor: pointer; transition: all 0.2s; margin-right: 6px; margin-bottom: 6px;
}
.tag-cloud-item:hover, .tag-cloud-item.active {
    background: #fff3eb; color: var(--tb-orange); border-color: var(--tb-orange);
}

/* --- 2.7 页脚 (Footer) --- */
.site-footer {
    background: #fff; padding: 30px 0 20px; text-align: center; margin-top: 30px;
}
.footer-links { margin-bottom: 15px; }
.footer-links a { margin: 0 10px; font-size: 14px; color: #666; }
.copyright { color: #999; font-size: 12px; }

/* --- 2.8 交互组件与按钮 --- */

/* 返回顶部按钮 */
.back-to-top-btn {
    position: fixed; bottom: 120px; right: 40px;
    width: 45px; height: 45px;
    background-color: rgb(86 84 84 / 44%); color: #f9f9f9;
    border-radius: 50%; text-align: center; line-height: 45px;
    font-size: 20px; cursor: pointer; z-index: 9990;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.back-to-top-btn:hover {
    background-color: var(--tb-orange); transform: translateY(-3px);
}
.back-to-top-btn.show { opacity: 1; visibility: visible; }

/* 购买按钮 */
.btn-buy-split-left {
    height: 43px; padding: 0 12px 0 16px;
    border-radius: 22px 0 0 22px;
    background: linear-gradient(90deg, #ffbf00, #ffa502);
    color: #fff; font-weight: bold; border: none; font-size: 15px;
    cursor: pointer; transition: opacity 0.2s;
}
.btn-buy-split-right {
    height: 43px; padding: 0 16px 0 12px;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, #ff8400, #ff5000);
    color: #fff; font-weight: bold; border: none; font-size: 15px;
    cursor: pointer; transition: opacity 0.2s;
}
.btn-buy-split-left:hover, .btn-buy-split-right:hover { opacity: 0.9; }

/* 规格/发卡相关 */
.spec-pagination-container {
    margin-top: 12px; text-align: left; display: none;
    padding-top: 8px; border-top: 1px dashed #eee;
}
.spec-pagination-btn {
    display: inline-block; padding: 4px 10px; margin: 0 4px;
    border: 1px solid #ddd; background-color: #f8f9fa; color: #333;
    cursor: pointer; border-radius: 4px; font-size: 12px;
    user-select: none; transition: all 0.2s;
}
.spec-pagination-btn:hover { background-color: #e2e6ea; border-color: #ccc; }
.spec-pagination-btn.active {
    background-color: var(--tb-orange); color: #fff; border-color: var(--tb-orange);
}
.spec-pagination-btn.disabled {
    opacity: 0.5; cursor: not-allowed; background-color: #f1f1f1;
}
#sku-btn-list { align-content: flex-start; }

/* 规格按钮通用样式 - [新增] 修改字体为 Arial Narrow */
.sku-btn {
    font-family: "Arial Narrow", Arial, sans-serif;
}

/* 支付方式图标 */
.payment-option {
    position: relative; display: inline-flex;
    align-items: center; justify-content: center;
    padding: 1px 6px; height: 38px; min-width: 38px;
    font-size: 25px; border: 1px solid #ddd; border-radius: 4px;
    margin-right: 12px; cursor: pointer; background: #fff; transition: all 0.2s;
}
.payment-option:hover { border-color: #bbb; }
.payment-option.active { border-color: #dc3545; }
.payment-option img { height: 20px; width: auto; object-fit: contain; }
.payment-check-mark {
    position: absolute; top: -7px; right: -7px;
    width: 16px; height: 16px; background-color: #dc3545; color: #fff;
    border-radius: 50%; font-size: 10px; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; transform: scale(0); transition: all 0.2s; z-index: 1;
}
.payment-option.active .payment-check-mark { opacity: 1; transform: scale(1); }

/* 缺货样式 */
.sku-btn.no-stock {
    background-color: #f5f5f5 !important; border-color: #e9ecef !important;
    color: #6c757d !important; position: relative; cursor: not-allowed;
    opacity: 1 !important; overflow: visible;
}
.sku-oos-badge {
    position: absolute; top: -7px; right: -6px;
    background-color: #dc3545; color: #fff; font-size: 9px;
    padding: 0px 3px; border-radius: 3px; z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 自动发卡选号弹窗 */
.stock-sales-row {
    font-size: 13px; color: #888; margin-bottom: 10px; display: flex; align-items: center;
}
.number-selector-overlay {
    position: absolute; top: 60px; left: 0; width: 100%; bottom: 160px;
    background: rgba(255, 255, 255, 0.98); z-index: 100;
    border: 1px solid #eee; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(20px); opacity: 0; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; flex-direction: column;
}
.number-selector-overlay.active { transform: translateY(0); opacity: 1; visibility: visible; }
.ns-header {
    padding: 10px 15px; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
    background: #f9f9f9; font-weight: bold; font-size: 14px;
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.ns-close { cursor: pointer; padding: 0 5px; font-size: 18px; color: #999; line-height: 1; }
.ns-close:hover { color: #333; }
.ns-body { flex: 1; overflow-y: auto; padding: 10px; }
.ns-footer {
    text-align: center; padding: 10px 0; border-top: 1px solid #eee;
    cursor: pointer; color: #999; font-size: 13px; background: #fff;
}
.ns-footer:hover { background-color: #f8f9fa; color: #333; }

/* 选号网格 (修复 gap) */
.ns-grid {
    display: flex; flex-wrap: wrap; 
    margin-right: -8px; margin-bottom: -8px; /* 抵消 gap */
}
.ns-item {
    padding: 6px 12px; background: #fff;
    border: 1px solid #ddd; border-radius: 4px; font-size: 12px;
    cursor: pointer; transition: all 0.2s; user-select: none;
    margin-right: 8px; margin-bottom: 8px; /* 替代 gap */
    /* [新增] 修改预设字体为 Arial Narrow */
    font-family: "Arial Narrow", Arial, sans-serif;
}
.ns-item:hover { border-color: #aaa; background-color: #f5f5f5; }
.ns-item.selected {
    background-color: #dc3545; border-color: #dc3545; color: #fff; font-weight: normal;
}
.price-bar { position: relative; }


/* ===================================================================
=== 3. 移动端样式 (Mobile Styles - Max Width 992px) ===
=================================================================== 
*/
@media (max-width: 991.98px) {
    body {
        padding-top: 50px; /* Header space */
        padding-bottom: 50px; /* Footer nav space */
    }
	.p-2 {
    padding: .25rem!important;
	}
	.p-3 {
	    padding: .5rem!important;
	}
	.p-4 {
	    padding: 1rem!important;
	}

    /* --- 3.1 隐藏PC端元素 --- */
    .tb-header, .col-lg-3, .main-nav { display: none !important; }
    .col-lg-9 { width: 100%; }

    /* --- 3.2 布局调整 --- */
    .container {
        margin-top: 10px !important; padding-left: 10px; padding-right: 10px;
    }
    .row { --bs-gutter-x: 10px; }
    .module-box { padding: 10px; margin-bottom: 10px; border-radius: 8px; }
    .module-title { font-size: 15px; margin-bottom: 10px; }

    /* --- 3.3 移动端头部 (Mobile Header) --- */
    .mobile-header {
        height: 50px; background: #fff; position: fixed; 
        top: 0; left: 0; width: 100%; z-index: 1001;
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .mh-left, .mh-right {
        flex: 0 0 20px; text-align: center; font-size: 20px; color: #333; cursor: pointer;
    }
    .mh-center {
        flex: 1; text-align: center; height: 40px;
        display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    #mobile-logo-img { height: 40px; width: auto; object-fit: contain; }
    #mobile-site-name-wrap { font-size: 18px; font-weight: bold; color: var(--tb-orange); }
    #mobile-site-name-wrap i { font-size: 20px; margin-right: 6px; }

    /* --- 3.4 移动端搜索 (Mobile Search) --- */
    .mobile-search-dropdown {
        position: fixed; top: 50px; left: 0; width: 100%;
        background: #fff; padding: 15px; z-index: 1000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: translateY(-150%); transition: transform 0.3s ease-in-out;
        display: block; 
    }
    .mobile-search-dropdown.show { transform: translateY(0); }
    .mobile-search-dropdown .tb-search-group { width: 100%; margin: 0; height: 40px; }
    .mobile-search-dropdown .tb-search-input { height: 100%; flex: 1; padding: 0 15px; }
    .mobile-search-dropdown .tb-search-btn { height: 33px; margin: 2px; }
    
    .mobile-search-overlay {
        position: fixed; top: 50px; left: 0; width: 100%; height: 100%;
        z-index: 999; display: none;
    }
    .mobile-search-overlay.show { display: block; }

    /* --- 3.5 移动端侧边栏 (Sidebar) --- */
    .mobile-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1002;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
    }
    .mobile-overlay.show { opacity: 1; visibility: visible; }
    .mobile-sidebar {
        position: fixed; top: 0; left: 0; width: 240px; 
        height: calc(100% - 50px); background: var(--tb-grad);
        color: #fff; z-index: 1003;
        transform: translateX(-100%); transition: transform 0.3s ease-in-out;
        display: flex; flex-direction: column;
    }
    .mobile-sidebar.show { transform: translateX(0); }
    
    .mobile-sidebar-header {
        padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); 
        text-align: center; position: relative; 
    }
    .mobile-sidebar-title { font-size: 18px; font-weight: bold; color: #fff; margin: 0; }
    .mobile-sidebar-close {
        position: absolute; top: 50%; right: 15px; transform: translateY(-50%);
        font-size: 22px; color: #fff; cursor: pointer; opacity: 0.7;
    }
    .mobile-sidebar-content { padding: 15px; flex: 1; overflow-y: auto; }
    
    #mobile-category-list a {
        display: flex; align-items: center; padding: 10px 5px;
        font-size: 14px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.15); 
    }
    #mobile-category-list a img {
        width: 20px; height: 20px; border-radius: 4px; margin-right: 10px;
        object-fit: cover; background: #fff; 
    }
    .mobile-sidebar-footer {
        padding: 15px; border-top: 1px solid rgba(255,255,255,0.2); 
        background: rgba(0,0,0,0.1); 
    }
    .mobile-sidebar-login-link {
        display: block; text-align: center; padding: 8px; font-size: 16px;
        color: #fff; border: 1px solid rgba(255,255,255,0.5); 
        border-radius: 18px; background: var(--tb-grad); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* --- 3.6 移动端底栏 (Bottom Nav) --- */
    .mobile-bottom-nav {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; 
        background: #fff; border-top: 1px solid #eee; z-index: 1006;
        display: flex; justify-content: space-around; box-shadow: none;
    }
    .mbn-item {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        justify-content: center; color: #666; font-size: 10px; padding: 5px 0;
    }
    .mbn-item i { font-size: 18px; margin-bottom: 2px; line-height: 1; }
    .mbn-item.active, .mbn-item:hover { color: var(--tb-orange); }

    /* --- 3.7 移动端联系弹窗 (Contact) --- */
    .mobile-contact-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: calc(100% - 50px);
        bottom: 50px; background: rgba(0,0,0,0.5); z-index: 1004;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
    }
    .mobile-contact-overlay.show { opacity: 1; visibility: visible; }
    .mobile-contact-sheet {
        position: fixed; bottom: 50px; left: 0; width: 100%; background: #fff;
        z-index: 1005; border-top-left-radius: 12px; border-top-right-radius: 12px;
        transform: translateY(100%); transition: transform 0.3s ease-in-out;
        max-height: 60vh; display: flex; flex-direction: column;
    }
    .mobile-contact-sheet.show { transform: translateY(0); }
    .mcs-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .mcs-content { padding: 15px; overflow-y: auto; line-height: 1.6; font-size: 13px; }

    /* --- 3.8 移动端商品列表重构 (List Style) --- */
    
    /* 重置网格为单列 */
    .taobao-grid {
        flex-direction: column;
        margin: 0; /* 移除PC端margin补偿 */
    }

    /* 卡片改为水平布局 */
    .tb-card {
        width: 100%; /* 占满一行 */
        margin: 0;   /* 移除PC端margin */
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important; /* [关键] 必须拉伸，右侧才有空间让价格沉底 */
        padding: 10px 0; /* 上下内边距 */
        min-height: 120px; 
        border-radius: 0; 
        border: none; 
        border-bottom: 1px solid #f0f0f0;
    }
    .tb-card:last-child { border-bottom: none; }
    
    /* 移除PC端悬停效果 */
    .tb-card:hover {
        transform: none; box-shadow: none; border-color: transparent; border-bottom-color: #f0f0f0;
    }

    /* 图片固定宽度 */
	.tb-img-wrap {
        flex: 0 0 90px; width: 90px; height: 90px !important;
        align-self: center; border: 1px solid #eee; overflow: hidden;
        margin-right: 10px; padding-bottom: 0; border-radius: 5px;
    }
    .tb-img {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: contain; border-radius: 5px;
    }

    /* 信息区域 */
    .tb-info {
        flex: 1; 
        display: flex !important; flex-direction: column !important;
        justify-content: flex-start !important; padding: 2px 0 0 0 !important;
        height: auto !important; min-width: 0; position: relative;
    }

    /* 标题自适应 */
    .tb-title {
        font-size: 13px; height: auto !important; min-height: 0 !important;
        line-height: 1.4 !important; margin-bottom: 4px !important;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; white-space: normal !important;
    }
    
    /* 价格栏强制底部对齐 */
    .tb-price-row {
        margin-top: auto !important; /* [核心] 自动占据剩余空间 */
        padding-top: 4px; width: 100%;
    }
    
    /* 标签与销量微调 */
    .tb-tags-row { margin-bottom: 0 !important; min-height: 0 !important; flex-shrink: 0; }
    .tb-price { font-size: 16px; }
    .tb-sales { font-size: 11px; }

    /* --- 3.9 其他移动端组件微调 --- */
    .cat-pill {
        font-size: 12px; padding: 4px 10px 4px 6px; margin-right: 6px;
    }
    .cat-pill img { width: 16px; height: 16px; }
    
    .site-footer { padding: 20px 0 10px; margin-top: 10px; }
    .footer-links a { margin: 0 5px; font-size: 12px; }
    .copyright { font-size: 11px; }

    .back-to-top-btn {
        width: 40px; height: 40px; line-height: 40px; font-size: 16px;
        right: 15px; bottom: 70px; /* 避开底部导航 */
        background-color: rgba(255,255,255,0.9); color: #333;
        border: 1px solid #eee;
    }
    .back-to-top-btn:hover {
        background-color: rgba(255,255,255,1); transform: none; color: var(--tb-orange);
    }
}

/* ==============================================
   PC端详情页：边框颜色、二维码与分享样式
============================================== */
.sku-btn.btn-outline-secondary:not(.no-stock):not(:hover) {
    border-color: #6c757d80 !important; 
}
.action-icon-wrap {
    cursor: pointer;
    position: relative;
    padding: 5px 0;
    margin-right: 25px;
    transition: color 0.2s;
}
.action-icon-wrap:hover { color: var(--tb-orange); }

/* 弹窗容器通用样式 */
.qr-popup, .share-popup {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 10px;
    z-index: 100;
    margin-top: 5px;
}
/* 鼠标悬停时显示 */
.action-icon-wrap:hover .qr-popup,
.action-icon-wrap:hover .share-popup {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease, visibility 0.1s ease;
}
/* 分享图标样式 */
.share-icon-link {
    display: inline-block;
    width: 32px; height: 32px; line-height: 32px;
    text-align: center; margin: 0 5px;
    border-radius: 50%; background: #e3e3e3;
    color: #666; transition: all 0.2s;
    font-size: 16px; text-decoration: none !important;
}
.share-icon-link:hover { transform: translateY(-2px); color: #fff; }
/* 各平台颜色 */
.share-wx:hover { background: #07c160; }
.share-qq:hover { background: #12b7f5; }
.share-tg:hover { background: #2aabee; }
.share-fb:hover { background: #1877f2; }
/* 二维码容器 */
#page-qrcode img {
    display: block;
    margin: 0 auto;
}
/* 自定义输入框 Placeholder 样式 (仿购物车风格) */
.input-light::placeholder { color: #ccc !important; font-size: 12px; font-weight: normal;}
.input-light::-webkit-input-placeholder { color: #ccc !important; font-size: 12px;}
.input-light::-moz-placeholder { color: #ccc !important; font-size: 12px;}
.input-light:-ms-input-placeholder { color: #ccc !important; font-size: 12px;}
.input-light:focus {border-color: #ff5000 !important; box-shadow: none !important; outline: none !important;}