:root {
    --primary-blue: #005596;
    --taobao-orange: #FF5000;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #F4F4F4;
    --white: #FFFFFF;
    --border-color: #E0E0E0;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 统一对齐基准：5列商品的总宽度 */
    --card-w: 242px;
    --card-gap: 8px;
    --total-w: calc(5 * var(--card-w) + 4 * var(--card-gap));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #fff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* 客服侧边栏打开时，整页主内容左移留出右侧空间，导航/header/banner/主区/购物袋/页脚统一缩进 */
body.support-sidebar-open {
    margin-right: var(--support-sidebar-width, 460px);
}
body.support-sidebar-open .global-nav,
body.support-sidebar-open .shop-header,
body.support-sidebar-open main,
body.support-sidebar-open .cart-sidebar,
body.support-sidebar-open footer {
    max-width: calc(100vw - var(--support-sidebar-width, 460px));
    width: 100%;
    box-sizing: border-box;
}
/* flex 子项允许被压窄，否则 main 不会随侧边栏收缩 */
body.support-sidebar-open main {
    min-width: 0;
}
/* 侧边栏打开时，内部 .container、搜索栏、商品区不超过可用宽度，与导航/header 一起缩进 */
body.support-sidebar-open .global-nav .container,
body.support-sidebar-open .shop-header .container,
body.support-sidebar-open main.container,
body.support-sidebar-open .product-section,
body.support-sidebar-open .section-header,
body.support-sidebar-open .product-grid {
    max-width: min(var(--total-w), calc(100vw - var(--support-sidebar-width, 460px)));
    width: 100%;
    box-sizing: border-box;
}
body.support-sidebar-open .product-section,
body.support-sidebar-open .section-header,
body.support-sidebar-open .product-grid {
    min-width: 0;
}
/* 详情页：打开对话框/购物袋时网格列可收缩，避免溢出或缩进错乱 */
body.support-sidebar-open .product-detail-main,
body.cart-sidebar-open .product-detail-main {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
    min-width: 0;
}
body.support-sidebar-open .product-detail-main .gallery-container,
body.cart-sidebar-open .product-detail-main .gallery-container,
body.support-sidebar-open .product-detail-main .product-buy-info,
body.cart-sidebar-open .product-detail-main .product-buy-info,
body.support-sidebar-open .product-detail-main .tabs-container,
body.cart-sidebar-open .product-detail-main .tabs-container {
    min-width: 0;
}
body.support-sidebar-open.cart-sidebar-open .product-detail-main {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
    min-width: 0;
}
body {
    transition: margin-right 0.25s ease, width 0.25s ease, max-width 0.25s ease;
}
body.support-sidebar-open .global-nav,
body.support-sidebar-open .shop-header,
body.support-sidebar-open main,
body.support-sidebar-open .cart-sidebar,
body.support-sidebar-open footer {
    transition: max-width 0.25s ease;
}

/* 购物袋打开时，整页主内容缩进留出右侧空间（与客服侧栏一致体验，宽度与聊天框一致 460px） */
:root {
    --cart-sidebar-width: 460px;
}
/* 与客服侧栏完全一致：body 占左侧宽度、左对齐，右侧 460px 留给购物袋 */
body.cart-sidebar-open {
    margin-left: 0 !important;
    margin-right: var(--cart-sidebar-width) !important;
    width: calc(100vw - var(--cart-sidebar-width)) !important;
    max-width: calc(100vw - var(--cart-sidebar-width)) !important;
    overflow-x: hidden;
    box-sizing: border-box;
}
body.cart-sidebar-open .global-nav,
body.cart-sidebar-open .shop-header,
body.cart-sidebar-open main,
body.cart-sidebar-open .user-center-container,
body.cart-sidebar-open footer {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}
/* 购物袋侧栏不参与 body 的 max-width，保持固定贴右、全高 */
body.cart-sidebar-open .cart-sidebar {
    max-width: none !important;
}
body.cart-sidebar-open main,
body.cart-sidebar-open main.user-center-container {
    min-width: 0;
}
body.cart-sidebar-open .global-nav .container,
body.cart-sidebar-open .shop-header .container,
body.cart-sidebar-open main.container,
body.cart-sidebar-open main .container,
body.cart-sidebar-open .product-section,
body.cart-sidebar-open .section-header,
body.cart-sidebar-open .product-grid {
    max-width: min(var(--total-w), calc(100vw - var(--cart-sidebar-width)));
    width: 100%;
    box-sizing: border-box;
}
body.cart-sidebar-open main.container,
body.cart-sidebar-open main .container {
    min-width: 0;
}
body.cart-sidebar-open .product-section,
body.cart-sidebar-open .section-header,
body.cart-sidebar-open .product-grid {
    min-width: 0;
}
body.cart-sidebar-open .global-nav,
body.cart-sidebar-open .shop-header,
body.cart-sidebar-open main,
body.cart-sidebar-open .cart-sidebar,
body.cart-sidebar-open footer {
    transition: max-width 0.25s ease;
}
/* 客服打开时优先用客服的缩进，不叠加购物袋缩进 */
body.support-sidebar-open.cart-sidebar-open {
    margin-right: var(--support-sidebar-width, 460px);
}
body.support-sidebar-open.cart-sidebar-open .global-nav,
body.support-sidebar-open.cart-sidebar-open .shop-header,
body.support-sidebar-open.cart-sidebar-open main,
body.support-sidebar-open.cart-sidebar-open .cart-sidebar,
body.support-sidebar-open.cart-sidebar-open footer {
    max-width: calc(100vw - var(--support-sidebar-width, 460px));
}
body.support-sidebar-open.cart-sidebar-open .global-nav .container,
body.support-sidebar-open.cart-sidebar-open .shop-header .container,
body.support-sidebar-open.cart-sidebar-open main.container,
body.support-sidebar-open.cart-sidebar-open .product-section,
body.support-sidebar-open.cart-sidebar-open .section-header,
body.support-sidebar-open.cart-sidebar-open .product-grid {
    max-width: min(var(--total-w), calc(100vw - var(--support-sidebar-width, 460px)));
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    transition: var(--transition);
}

.container {
    max-width: var(--total-w);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 首页主体区域：固定占满宽度，避免无商品时因内容收缩导致标签栏变窄、左右不对齐 */
main.container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Category Drop Effects */
.category-tab.drop-active {
    background-color: #fff0e0 !important;
    border: 2px solid var(--taobao-orange) !important;
    transform: scale(1.15);
    z-index: 1001;
    box-shadow: 0 4px 15px rgba(255, 80, 0, 0.3);
}

.category-tab.drop-active::after {
    content: '🚀 释放以移动';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--taobao-orange);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { bottom: -30px; }
    to { bottom: -35px; }
}

/* Admin Specific UI */
.admin-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    z-index: 5;
    cursor: pointer;
}

.product-card:hover .admin-delete {
    display: flex;
}

.admin-delete:hover {
    background: #ff4d4f;
}

.admin-img-wrap {
    position: relative;
    transition: all 0.2s;
}

.admin-img-wrap.drag-over {
    outline: 2px dashed var(--taobao-orange);
    outline-offset: -4px;
    background: rgba(255, 80, 0, 0.05);
    z-index: 10;
}

.admin-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.product-card:hover .admin-img-overlay {
    opacity: 1;
}

.admin-editing {
    outline: 2px solid var(--taobao-orange);
    background: #fff;
    border-radius: 2px;
}

.admin-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    display: none;
    z-index: 9999;
}

/* Admin Specific UI */
.admin-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    z-index: 5;
    cursor: pointer;
}

.product-card:hover .admin-delete {
    display: flex;
}

.admin-delete:hover {
    background: #ff4d4f;
}

.admin-img-wrap {
    position: relative;
    transition: all 0.2s;
}

.admin-img-wrap.drag-over {
    outline: 2px dashed var(--taobao-orange);
    outline-offset: -4px;
    background: rgba(255, 80, 0, 0.05);
    z-index: 10;
}

.admin-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto; /* Changed to auto to allow clicks */
    cursor: pointer;
}

/* Detail page main image overlay should always show on hover in edit mode */
.main-img-box:hover .admin-img-overlay,
.product-card:hover .admin-img-overlay {
    opacity: 1;
}

.admin-editing {
    outline: 2px solid var(--taobao-orange);
    background: #fff;
    border-radius: 2px;
}

.admin-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    display: none;
    z-index: 9999;
}

/* Global Navigation (Taobao Style) */
.global-nav {
    background: transparent; 
    font-size: 12px;
    color: #6c6c6c;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.global-nav .container {
    display: flex;
    justify-content: space-between;
    height: 35px;
    align-items: center;
    background: #f5f5f5;
    padding: 0 10px;
    border-bottom: 1px solid #eee;
}

.nav-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-links a:hover {
    color: var(--taobao-orange);
}

.product-card.is-dragging {
    opacity: 0.1 !important;
    transform: scale(0.3) !important;
    filter: grayscale(1) blur(2px);
    border: 2px dashed var(--taobao-orange) !important;
    /* Removed z-index to prevent breaking drag logic */
}

.product-card.is-dragging img {
    opacity: 0.1 !important;
}

/* Shop Header */
.shop-header {
    background: #fff;
    padding: 8px 0; /* 从 24px 大幅减小到 8px */
    position: relative;
}

.shop-header .container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px; /* 减小 logo 和 banner 之间的间距 */
    padding: 0;
    box-sizing: border-box;
    max-width: var(--total-w);
    margin: 0 auto;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.company-logo-container {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-logo-img {
    width: 80px; /* 从 100px 减小到 80px */
    height: 80px; /* 从 100px 减小到 80px */
    object-fit: contain;
    background: #fff;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.company-logo-img:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.company-website {
    margin-top: 4px; /* 从 8px 减小到 4px */
    font-size: 11px; /* 稍微减小字号 */
    color: #666;
    text-align: center;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 顶部 Banner 容器 */
.header-banner-images {
    flex: 1;
    height: 130px;
    margin-left: 0;
    position: relative;
    overflow: hidden;
    background: #fcfcfc;
    border-radius: 20px;
    border: 1px solid #f2f2f2;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: grab;
    z-index: 10;
}

.header-banner-images:active {
    cursor: grabbing;
}

.banner-track {
    display: flex;
    height: 100%;
    width: max-content;
    will-change: transform;
    transition: none;
    padding: 0;
    gap: 6px;
    align-items: center;
    position: relative;
    margin: 0;
    cursor: inherit;
    touch-action: none; /* 禁用浏览器默认手势，完全由 JS 掌控 */
}

.banner-track {
    display: flex;
    height: 100%;
    width: max-content;
    will-change: transform; /* 告诉浏览器提前开启 GPU 加速 */
    transition: none; /* 动画由 JS 统一管理 */
    padding: 0;
    gap: 6px;
    align-items: center;
    position: relative;
    margin: 0;
    cursor: inherit;
}

/* 编辑模式下保持绝对定位 */
body[data-admin] .banner-track {
    position: absolute;
    left: 0;
    top: 0;
}

.banner-image-item {
    /* 图片框根据图片大小自适应 */
    width: 120px; /* 初始宽度，图片加载后会根据图片尺寸调整 */
    min-width: 120px; /* 最小宽度 */
    flex: 0 0 120px; /* 初始flex值 */
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.4s ease;
    padding: 0; /* 移除内边距，让图片完全填满框 */
    margin: 0; /* 确保没有外边距 */
    /* 启用滚动对齐，确保每次滚动一个完整的图片 */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    overflow: hidden; /* 确保图片不会溢出 */
}

.banner-image-item .banner-img {
    /* 图片保持原始尺寸，不裁剪 */
    width: auto;
    height: 100%; /* 高度填满容器 */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持比例，不裁剪 */
    object-position: center;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.04));
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0.9;
    display: block;
    pointer-events: none; /* 禁用图片原生拖拽 */
    -webkit-user-drag: none;
    user-select: none;
}

.banner-image-item.active-hover .banner-img,
.banner-image-item:hover .banner-img {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
}

/* 品牌文字提示 - 极简现代感标签 */
.banner-brand-tag {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--taobao-orange);
    color: #fff;
    padding: 3px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.2);
}

.banner-image-item.active-hover .banner-brand-tag,
.banner-image-item:hover .banner-brand-tag {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
}

/* 编辑模式下的删除按钮 - 放在右上角 */
.banner-del-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
    transition: all 0.2s ease;
}

.banner-del-btn:hover {
    transform: scale(1.1);
    background: #ff7875;
}

body[data-admin] .banner-image-item:hover .banner-del-btn {
    display: flex;
}

/* 编辑模式下的品牌和子分类弹出框 - 模态框 */
.banner-info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.banner-info-popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.banner-info-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    min-width: 320px;
    max-width: 400px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 90vh;
    overflow-y: auto;
}

.banner-info-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.banner-info-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--taobao-orange);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
    text-align: center;
}

.banner-info-popup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.banner-info-popup-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.banner-info-popup-field label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.banner-info-popup-brand-select,
.banner-info-popup-subcategory-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.banner-info-popup-brand-select:hover,
.banner-info-popup-subcategory-select:hover {
    border-color: var(--taobao-orange);
}

.banner-info-popup-brand-select:focus,
.banner-info-popup-subcategory-select:focus {
    outline: none;
    border-color: var(--taobao-orange);
    box-shadow: 0 0 0 2px rgba(255, 80, 0, 0.1);
}

.banner-info-popup-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.banner-info-popup-save,
.banner-info-popup-cancel {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.banner-info-popup-save {
    background: var(--taobao-orange);
    color: #fff;
}

.banner-info-popup-save:hover {
    background: #ff6600;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 80, 0, 0.3);
}

.banner-info-popup-cancel {
    background: #f5f5f5;
    color: #666;
}

.banner-info-popup-cancel:hover {
    background: #e8e8e8;
    color: #333;
}


.banner-drop-zone {
    display: none !important;
}

.shop-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.shop-logo {
    font-size: 32px;
    font-weight: 800;
    color: var(--taobao-orange);
    line-height: 1;
    letter-spacing: -0.5px;
}

.shop-ratings {
    display: flex;
    gap: 12px;
    font-size: 13px;
    background: #f8f8f8;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.rating-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-score {
    color: var(--taobao-orange);
    font-weight: 700;
}

.shop-actions {
    display: flex;
    gap: 12px;
}

.btn-follow {
    padding: 8px 20px;
    background: var(--taobao-orange);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.15);
}

.btn-follow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 80, 0, 0.25);
    background: #ff6a00;
}
    font-size: 13px;
}

/* Hero Section */
.hero {
    height: 450px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 85, 150, 0.7), transparent);
    display: flex;
    align-items: center;
}

.hero-content {
    color: white;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.btn-shop-now {
    padding: 12px 30px;
    background: var(--white);
    color: var(--primary-blue);
    font-weight: bold;
    border-radius: 50px;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-shop-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Footer */
footer {
    background: #333;
    color: #999;
    padding: 15px 0; /* 从 40px 压缩到 15px */
    margin-top: auto; /* 使用 auto 让 footer 自动推到底部 */
    font-size: 13px;
    flex-shrink: 0; /* 防止 footer 被压缩 */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 从 30px 压缩到 20px */
    margin-bottom: 15px; /* 从 30px 压缩到 15px */
}

.footer-col h3 {
    color: white;
    margin-bottom: 8px; /* 从 15px 压缩到 8px */
    font-size: 14px; /* 从 16px 压缩到 14px */
}

.footer-col ul li {
    margin-bottom: 4px; /* 从 8px 压缩到 4px */
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 10px; /* 从 20px 压缩到 10px */
}

/* Product Grid Styles - 与顶部 .shop-header .container 同宽、同对齐 */
.product-section {
    padding: 0 0 20px 0;
    background: #fff;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
    max-width: var(--total-w);
    width: 100%;
    box-sizing: border-box;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 12px;
    padding-top: 4px;
    padding-left: 0;
    padding-right: 0;
    min-height: 40px;
    position: sticky;
    top: 35px;
    z-index: 100;
    background: #fff;
    width: 100%;
    max-width: var(--total-w);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.section-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--taobao-orange, #f40) 0%, rgba(255, 80, 0, 0.4) 100%);
    opacity: 0.85;
    pointer-events: none;
}

.category-group {
    margin-bottom: 40px;
}

.category-group-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 20px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-group-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--taobao-orange);
    border-radius: 2px;
}

.category-tab.drop-active {
    background-color: #fff0e0 !important;
    border: 2px solid var(--taobao-orange) !important;
    transform: scale(1.15);
    z-index: 1001; /* Above everything */
    box-shadow: 0 4px 15px rgba(255, 80, 0, 0.3);
}

.category-tab.drop-active::after {
    content: '🚀 释放以移动';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--taobao-orange);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { bottom: -30px; }
    to { bottom: -35px; }
}

.category-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 2px 0 6px 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 340px);
    scroll-behavior: smooth;
    position: relative;
    z-index: 100;
}

/* Webkit 浏览器滚动条样式 - 更明显的滚动条 */
.category-tabs::-webkit-scrollbar {
    height: 8px; /* 滚动条高度 */
}

.category-tabs::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.category-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.category-tabs::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 编辑模式：导出 Excel 等操作区 */
.edit-mode-actions {
    display: none;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 12px;
}
body[data-admin="1"] .edit-mode-actions {
    display: flex;
}
.btn-export-excel {
    padding: 8px 14px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-export-excel:hover {
    background: linear-gradient(180deg, #388e3c 0%, #2e7d32 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.btn-import-excel {
    padding: 8px 14px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(180deg, #1565c0 0%, #0d47a1 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-import-excel:hover {
    background: linear-gradient(180deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* 分类标签栏右侧的搜索容器 */
.header-search-container {
    flex-shrink: 0;
    margin-left: 16px;
    margin-top: 0;
    margin-right: 0;
    position: relative;
    z-index: 101;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
}


.category-tab {
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;
    color: #555;
    transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    font-size: 13px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.category-tab:hover {
    z-index: 1002; /* hover 时提高层级，确保下拉菜单显示 */
}

/* 下拉菜单样式 */
.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 8px 0;
    display: none;
    z-index: 1001; /* 提高 z-index，确保在 section-header 上方 */
    min-width: 150px;
    /* 移除 margin-top，改用 transform 产生视觉偏移，防止鼠标丢失 */
    transform: translateY(8px);
    overflow: visible; /* 确保下拉菜单内容可见 */
}

.category-dropdown.open {
    display: block;
}

/* 建立隐形桥梁，填充 15px 的区域确保鼠标移动不会丢失 */
.category-dropdown::before {
    content: "";
    position: absolute;
    top: -15px; /* 向上延伸覆盖父标签区域 */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.category-tab:hover .category-dropdown {
    display: block;
}

.category-tab.force-open .category-dropdown {
    display: block;
}

.category-tab.force-open .arrow {
    transform: rotate(180deg);
}

.dropdown-item {
    padding: 8px 16px;
    color: #333;
    font-size: 14px;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.sub-text{
    flex: 1;
}

.sub-drag-handle{
    color:#bbb;
    cursor: grab;
    user-select: none;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}

.sub-drag-handle:active{
    cursor: grabbing;
}

.dropdown-item:hover {
    background: #fff0e0;
    color: #f40;
}

.dropdown-item.sub-drop-active{
    background: #fff0e0;
    color: #f40;
    outline: 3px solid rgba(255,80,0,0.55);
    outline-offset: -2px;
    border-radius: 8px;
}

.dropdown-item.sub-selected{
    background: rgba(255,80,0,0.08);
    outline: 2px solid rgba(255,80,0,0.35);
    outline-offset: -2px;
    border-radius: 8px;
}

.sub-selected-badge{
    display:inline-block;
    margin-left:8px;
    padding:2px 6px;
    border-radius:10px;
    font-size:12px;
    line-height:1.2;
    color:#ff5000;
    background:#fff0e0;
    border:1px solid rgba(255,80,0,0.25);
    flex: 0 0 auto;
}

.dropdown-item.sub-drop-active .sub-drag-handle{
    color:#ff5000;
}

.dropdown-item .delete-sub-btn {
    display: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    border: none;
    background: transparent;
    padding: 0 4px;
}

.category-tab[data-admin="1"] .dropdown-item:hover .delete-sub-btn {
    display: block;
}

/* 下拉菜单 portal 到 body 后不再是 .category-tab 的后代，需单独支持编辑模式 hover 显示删除按钮 */
body[data-admin] .category-dropdown.open .dropdown-item:hover .delete-sub-btn {
    display: block;
}

/* portal 下拉菜单自身带 data-admin="1" 时也显示删除按钮（不依赖 body 标记） */
.category-dropdown.open[data-admin="1"] .dropdown-item:hover .delete-sub-btn {
    display: block;
}

.dropdown-item .delete-sub-btn:hover {
    color: #f40;
}

.add-sub-btn {
    padding: 12px 16px;
    color: #f40;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-top: 1px solid #eee;
    text-align: center;
    transition: all 0.2s;
    background: #fff;
    position: relative;
    z-index: 2000; /* 强制最高层级 */
    user-select: none;
    pointer-events: auto !important; /* 确保不被任何穿透层干扰 */
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.add-sub-btn:hover {
    background: #fff0e0;
    color: #ff5000;
}

.category-tab .arrow {
    font-size: 10px;
    transition: transform 0.15s ease;
    margin-left: 2px;
    pointer-events: none;
}

.category-tab:hover .arrow {
    transform: rotate(180deg);
}

.category-tab .delete-cat-btn {
    display: none;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    font-size: 12px;
    margin-left: 2px;
}

.category-tab:hover .delete-cat-btn {
    display: inline-block;
    background: #ff5000;
}

.add-category-btn {
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    color: #666;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    flex-shrink: 0;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.add-category-btn:hover {
    border-color: #f40;
    color: #f40;
}

.category-tab:hover {
    color: var(--taobao-orange, #f40);
    background: rgba(255, 80, 0, 0.08);
    border-color: rgba(255, 80, 0, 0.15);
}

.category-tab.active {
    color: #fff;
    background: var(--taobao-orange, #f40);
    border-color: var(--taobao-orange, #f40);
    box-shadow: 0 1px 3px rgba(255, 80, 0, 0.25);
}

.product-grid {
    /* 列宽使用 :root 的 --card-w，勿在此覆盖以免商品卡无故变宽 */
    --card-gap: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--card-w));
    grid-auto-rows: 1fr;
    gap: var(--card-gap);
    padding: 0 0 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%; /* 无商品时也占满一行，避免 section 被压窄导致标签栏不对齐 */
    max-width: var(--total-w);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* 当筛选结果很少（≤ 5 个）时，从左开始排列，避免“漂在中间” */
.product-grid.align-left {
    justify-content: start;
    margin-left: 0;
    margin-right: auto;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    min-width: 0; /* 网格子项默认可被内容撑宽，锁定为列宽内收缩 */
    min-height: 0;
    padding-bottom: 8px;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border-color: var(--taobao-orange);
    z-index: 2;
}

.product-img-wrapper {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 85%; /* 从 100% 减小到 85%，主图框变矮 */
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}

.product-img-wrapper img.product-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 95% !important; /* 稍微增加最大比例，利用空间 */
    max-height: 95% !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.product-card:hover .product-img-wrapper img.product-img {
    transform: translate(-50%, -50%) scale(1.08) !important;
}

.card-thumbs-wrap {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 0 10px;
    background: #fff;
    height: 34px;
    flex-shrink: 0;
}

.card-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    height: 100%;
    align-items: center;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.card-thumbs::-webkit-scrollbar {
    height: 4px;
}

.card-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.card-thumbs::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
}

.card-thumbs::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}

.product-info {
    padding: 4px 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
}

.card-thumb-item {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    flex: 0 0 auto;
    background: #fff;
}

.card-thumb-item.active {
    border-color: var(--taobao-orange);
}

.card-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.card-thumb-nav {
    width: 18px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: #666;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.card-thumb-nav:hover {
    border-color: rgba(255, 80, 0, 0.35);
    color: var(--taobao-orange);
}

.card-thumb-nav.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}


/* 已合并至 .product-img-wrapper img.product-img */

/* 移除冗余定义 */
.card-meta{
    margin-top: 4px;
    display: block;
}
.card-meta-row{
    display:flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: #888;
    line-height: 1.1;
    margin-bottom: 1px;
}
.card-meta-label{
    color: #777;
    white-space: nowrap;
}
.card-meta-value{
    color: #666; /* 编号不加黑 */
    font-weight: 400;
    text-align: left;
    /* 只显示 1 行，超出显示省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 编辑模式：让可编辑字段像标题一样明显可点可改 */
.card-meta-mpn[data-role="mpn"]{
    cursor: text;
    flex: 1;
    min-width: 0;
    display: inline-block; /* 空内容也有可点击面积 */
    min-height: 16px;
}

/* 零件编号为空时显示占位提示（仅视觉，不写入数据），同时方便双击命中 */
.card-meta-mpn[data-role="mpn"]:empty::before{
    content: "（双击填写零件编号）";
    color: #bbb;
}

.card-meta-flt[data-role="flt"]{
    cursor: text;
    flex: 1;
    min-width: 0;
}

.card-buy{
    margin-top: 2px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 4px 6px;
    min-width: 0;
}
.card-buy-top{
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.card-buy-price-wrap{
    display: flex;
    align-items: baseline;
    flex-shrink: 1;
    min-width: 0;
    margin-left: 4px;
}
.card-buy-price{
    color: var(--taobao-orange);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
.card-buy-price-wrap .tax-note{
    font-size: 10px;
    font-weight: 400;
    color: #999;
    margin-left: 3px;
    white-space: nowrap;
}

/* 首页卡片价格禁用状态 */
.card-buy-price-wrap.price-disabled .card-buy-price {
    color: #bbb !important;
}
.card-buy-price-wrap.price-disabled .tax-note {
    color: #ccc !important;
}
.card-buy-qty{
    display:inline-flex;
    align-items:center;
    flex-shrink: 0;
}
.card-buy-qty .order-qty-controls{
    border-radius: 8px;
}
.card-buy-qty .qty-btn{
    width: 24px;
    height: 24px;
    font-size: 14px;
}
.card-buy-qty .qty-input{
    width: 36px;
    height: 24px;
    font-size: 12px;
}
.card-buy-actions{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
}
/* 三枚等分宽，均禁止省略号；略缩小字号与左右内边距以在 242px 卡内完整显示 */
.card-buy-now,
.card-add-cart,
.card-inquire-price{
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 2px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: visible;
}
.card-inquire-price{
    background: #fff;
    color: #2563eb;
    border: 1px solid #2563eb;
    cursor: pointer;
}
.card-buy-now{
    background: #ffeded;
    color: var(--taobao-orange);
    border: 1px solid var(--taobao-orange);
}
.card-add-cart{
    background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
    color: #fff;
    border: none;
}

.product-subtag-uncat{
    display:inline-block;
    align-self:flex-start;
    margin-top:6px;
    padding:2px 6px;
    border-radius:10px;
    font-size:12px;
    line-height:1.2;
    color:#ff5000;
    background:#fff0e0;
    border:1px solid rgba(255,80,0,0.25);
}

.product-tag {
    display: none; /* 淘宝列表页通常没有这个标签，或者在图片上 */
}

.product-title {
    font-size: 13px;
    font-weight: 700; /* 统一加黑 */
    margin-bottom: 2px; /* 减小间距，让标题与库存编号更紧凑 */
    height: 34px; /* 保持2行高度 */
    line-height: 17px; /* 增加行高，更易读 */
    overflow: hidden;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.2s ease;
}

.product-title:hover {
    color: var(--taobao-orange);
    /* 移除下划线，淘宝现代风格通常只变色 */
    text-decoration: none;
}

.product-price-row {
    margin-top: auto;
    display: flex;
    align-items: baseline; /* 基线对齐 */
    gap: 5px;
}

.product-price {
    color: var(--taobao-orange);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.product-price span {
    font-size: 12px;
    margin-right: 2px;
}

.product-sales {
    font-size: 12px;
    color: #999;
    margin-left: auto; /* 靠右 */
}

/* Detail Page Specific Styling - 与首页 section-header 对齐、统一样式 */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 4px 0 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
    position: sticky;
    top: 35px;
    z-index: 100;
    background: #fff;
    width: 100%;
    max-width: var(--total-w);
    min-height: 40px;
    box-sizing: border-box;
}
.breadcrumb::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--taobao-orange, #f40) 0%, rgba(255, 80, 0, 0.4) 100%);
    opacity: 0.85;
    pointer-events: none;
}

.breadcrumb-links {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.breadcrumb a {
    font-size: 14px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 400;
}

.breadcrumb a:hover {
    color: var(--taobao-orange);
}

/* 最后一个代表当前页面的文字，加大加粗展现现代感 */
.breadcrumb a:last-child {
    font-size: 20px;
    color: #111;
    font-weight: 800;
    pointer-events: none;
}

.breadcrumb span {
    color: #ddd;
    font-size: 14px;
    font-weight: 300;
}

.product-detail-main {
    background: var(--white);
    padding: 12px 0 20px 0;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 640px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    align-items: start;
    overflow: visible; /* 不创建滚动容器，保证右侧 sticky 随页面滚动时固定 */
}

/* 详情/资料区域：放在大图下方，宽度与大图一致 */
.tabs-container {
    grid-column: 1; /* 强制锁定在第一列 */
    grid-row: 2;    /* 强制锁定在第二行（大图下方） */
    width: 100%;    /* 确保宽度填满 640px 列 */
    margin-top: 0;  /* 移除顶部间距（从 15px 减小到 0） */
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 0; /* 移除底部外边距，由父容器 padding 控制 */
}

/* 购买信息区域：滑动左侧产品详情时右侧保持固定不动，紧贴面包屑下方避免文字被挡 */
.product-detail-main .product-buy-info {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    position: sticky;
    /* 面包屑 sticky top 35px + 内边距与内容约 58px ≈ 93px，留 2px 间距 */
    top: 95px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

/* 标题样式调整 - 现在在购买区域内 */
.product-note-top {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 12px;
    overflow: visible;
}

/* 图片区域在第一行左侧 */
.product-detail-main .gallery-container {
    grid-column: 1;
    grid-row: 1;
}
.product-buy-scroll{
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto; /* 允许纵向滚动 */
    overflow-x: hidden; /* 隐藏横向滚动条 */
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    background: #fff; /* 确保滚动区域背景不透明 */
}

/* SKU 区域自然高度 */
.product-buy-scroll .sku-section {
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    flex: 0 0 auto; /* 自然高度 */
    display: flex;
    flex-direction: column;
}

/* 当所有 SKU 都没有缩图时，位置与编辑模式一致 */
.product-buy-scroll .sku-section.all-text-only {
    margin-top: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    flex: 0 0 auto; /* 不拉伸，自然高度 */
    padding-bottom: 0;
}

.product-buy-scroll .sku-section.all-text-only .sku-thumbs-wrap {
    flex: 0 0 auto;
    padding: 8px 0;
    margin-top: 0;
}

.product-buy-scroll .sku-section.all-text-only .sku-thumbs-container {
    flex: 0 0 auto;
}

.product-buy-scroll .sku-section.all-text-only .sku-thumbs-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: start;
    flex: 0 0 auto;
}

/* Webkit 浏览器滚动条样式 */
.product-buy-scroll::-webkit-scrollbar {
    width: 8px;
}

.product-buy-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.product-buy-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.product-buy-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.gallery-container {
    /* sticky 会让视觉上更难"底部齐平"，这里改为普通流布局 */
    position: relative;
    /* 缩略图在左、大图在右 */
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    align-items: start; /* 两列从顶部对齐，大图框固定比例 */
    height: auto;
    margin-bottom: 0; /* 确保底部没有间距 */
    padding-bottom: 0;
}

.main-img-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: zoom-in;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.main-img-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    object-position: center;
}

/* Image Zoom Feature */
.main-img-box.zoomed {
    cursor: zoom-out;
    overflow: hidden;
}

.main-img-box.zoomed img {
    /* Sizing and positioning controlled via JavaScript for full pan capability */
}

/* Zoom hint overlay */
.main-img-box::after {
    content: '🔍 点击放大查看细节';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.main-img-box:hover::after {
    opacity: 1;
}

.main-img-box.zoomed::after {
    content: '移动鼠标查看细节 · 点击退出';
}

.gallery-container .main-img-box {
    grid-column: 2;
    grid-row: 1;
    align-self: start; /* 固定比例，不被缩略图列拉伸 */
}

.gallery-container .thumb-strip-wrap {
    grid-column: 1;
    grid-row: 1;           /* 与大图同一行 */
    align-self: stretch;   /* 与大图同高 */
}

.thumb-strip-wrap {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.thumb-strip-wrap.thumb-vertical {
    /* 竖向：上按钮 / 列表 / 下按钮 */
    grid-template-columns: 1fr;
    grid-template-rows: 28px 1fr 28px;
    align-content: start;
    align-items: start; /* 覆盖父级的 center，让内容从顶部开始 */
    height: 100%;
    min-height: 0; /* 关键：允许在 grid 行内收缩，不要被内容撑高 */
}

.thumb-nav {
    width: 28px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: #666;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.thumb-nav:hover {
    border-color: rgba(255, 80, 0, 0.35);
    color: var(--taobao-orange);
}

.thumb-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.thumb-strip-wrap.thumb-vertical .thumb-nav {
    width: 100%;
    height: 28px;
    font-size: 18px;
    border-radius: 8px;
}

.thumb-strip {
    display: flex;
    gap: 10px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 6px; /* 给滚动条留空间 */
    -webkit-overflow-scrolling: touch;
}

.thumb-strip-wrap.thumb-vertical .thumb-strip {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0;
    padding-right: 0; /* 移除右侧 padding */
    padding-left: 0;  /* 移除左侧 padding */
    min-height: 0;      /* 关键：让缩略图列表在固定高度内滚动 */
    height: 100%;       /* 填满 grid cell 以便 justify-content 生效 */
    justify-content: flex-start; /* 即使只有 1 张，也从顶部开始排 */
    align-items: center; /* 缩略图水平居中 */
    scrollbar-gutter: stable; /* 关键：提前预留滚动条空间，防止出现时挤压内容 */
}

/* 优化详情页缩略图滚动条样式，使其更细，减少对空间的占用 */
.thumb-strip::-webkit-scrollbar {
    width: 4px;
}
.thumb-strip::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.thumb-strip::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.thumb-item {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 auto; /* 防止被压缩，保证横向滚动 */
    position: relative; /* 让删除按钮可定位在右上角 */
}

/* 主图缩略图删除按钮（编辑模式） */
body[data-admin] .thumb-item:not(.add-thumb-btn) .thumb-del{
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 77, 79, 0.9);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 默认不可点击 */
    transition: opacity 0.2s ease;
}

/* hover 时显示删除按钮（排除添加按钮，包括激活状态） */
body[data-admin] .thumb-item:not(.add-thumb-btn):hover .thumb-del {
    opacity: 1;
    pointer-events: auto;
}

/* 添加按钮永远不显示删除按钮 */
body[data-admin] .thumb-item.add-thumb-btn .thumb-del {
    display: none !important;
}

.thumb-strip-wrap.thumb-vertical .thumb-item {
    width: 76px;
    height: 76px;
}

/* hover 时显示激活状态（排除添加按钮，但只在非激活状态时） */
body[data-admin] .thumb-item:not(.add-thumb-btn):not(.active):hover {
    border-color: var(--taobao-orange);
}

/* 激活状态一直显示红色边框 */
.thumb-item.active {
    border-color: var(--taobao-orange) !important;
    border-width: 2px;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-buy-info {
    /* 右侧：标题固定顶部，SKU滚动，底部固定（价格/数量/按钮） */
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;  /* 不超过父容器 */
    overflow: hidden;  /* 只允许内部滚动容器滚动 */
    position: relative; /* 为按钮绝对定位提供参考 */
}

/* 标题框固定在顶部，不参与滚动 */
.product-buy-info > #product-note-container {
    flex-shrink: 0; /* 不收缩 */
    margin-bottom: 10px;
}

.detail-title {
    font-size: 13px; /* 比首页标题小 1 号 */
    font-weight: 700; /* 与首页标题一致 */
    margin-bottom: 12px;
    line-height: 20px; /* 相应调整行高 */
    color: #333;
    /* 限制 2 行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-meta{
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.meta-row{
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.4;
}

.meta-label{
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.meta-value{
    font-size: 14px;
    color: #222;
    font-weight: 600;
    word-break: break-word;
}

/* SKU 选择区域 - 放在价格上方 */
.sku-section {
    padding: 0; /* 移除所有内边距 */
    margin-bottom: 0; /* 移除底部边距，紧贴价格框 */
}

.detail-price-box {
    background: #fff;
    padding: 10px 0;
    border-radius: 4px;
    margin-bottom: 0; 
    margin-top: 0; /* 移除固定间距，高度由 JS 动态计算以对齐详情页选项卡 */
    border-bottom: none; 
    flex-shrink: 0;
    transition: background 0.3s;
    position: relative;
    z-index: 10;
    box-shadow: 0 -10px 10px -5px rgba(255,255,255,1);
}

/* 价格禁用状态：背景变灰 */
.detail-price-box.price-disabled {
    background: #f5f5f5 !important;
}

.detail-price-box.price-disabled .price-toggle-item,
.detail-price-box.price-disabled .price-label,
.detail-price-box.price-disabled .qty-label {
    color: #ccc !important;
}

.detail-price-box.price-disabled .price-value {
    color: #bbb !important;
}

.action-buttons {
    flex-shrink: 0; /* 固定在底部，不参与滚动 */
}

/* tighten right column spacing */
.product-note-area{
    margin-bottom: 10px;
    flex-shrink: 0;
    background: #fff;
}
.product-note-area .note-placeholder{
    padding: 12px;
}
.sku-thumbs-container{
    gap: 10px;
    margin-bottom: 0;
    overflow: visible;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 永远从左开始，不居中 */
    align-items: flex-start;
    align-content: flex-start;   /* 多行/单行都贴顶部 */
    flex-shrink: 0;    /* 不压缩 */
}
.sku-selector{
    margin-bottom: 4px;
    margin-top: 0;     /* 右侧内容上移，与左侧图片区顶部对齐 */
    padding-top: 10px;
    flex-shrink: 0;    /* 不压缩 */
}

/* 备注文字更紧凑：放不下就滚动，不撑爆布局 */
.product-note-content{
    font-size: 14px;
    line-height: 1.6;
}
.product-note-content p{
    margin: 6px 0;
}
.product-note-content ul,
.product-note-content ol{
    margin: 6px 0 6px 18px;
    padding: 0;
}
.product-note-content li{
    margin: 4px 0;
}

.price-row{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: nowrap;
}

.qty-label{
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    margin-left: 16px;
}

/* 库存：与价格、数量统一 — 同高 36px、同边框、同圆角 */
.stock-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0 12px 0 10px;
    height: 36px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    box-sizing: border-box;
}
.stock-badge::before{
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6B3FDE;
    flex-shrink: 0;
}
.stock-badge[data-stock="无库存"]{
    color: #8e8e93;
    font-weight: 400;
}
.stock-badge[data-stock="无库存"]::before{
    background: transparent;
    border: 2px solid #9E9E9E;
    box-sizing: border-box;
}

/* 首页卡片上的无库存标签（紧凑） */
.card-stock-badge {
    margin-left: 6px;
    padding: 0 6px;
    height: 22px;
    font-size: 11px;
}
.card-stock-badge::before {
    width: 8px;
    height: 8px;
}
.card-stock-badge[data-stock="无库存"]::before {
    background: transparent;
    border: 1.5px solid #9E9E9E;
    box-sizing: border-box;
}

.order-qty-controls{
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    height: 36px; /* 统一高度与购买按钮一致 */
}

.qty-btn{
    width: 32px;
    height: 100%;
    border: none;
    background: #fafafa;
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.qty-btn:active{
    background: #f1f1f1;
}

.qty-input{
    width: 54px;
    height: 100%;
    border: none;
    outline: none;
    text-align: center;
    font-size: 14px;
    color: #333;
}

/* Hide native number spinners (we use custom +/- buttons) */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.qty-input[type="number"]{
    appearance: textfield;
    -moz-appearance: textfield;
}

.price-label {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
}

/* 详情页价格切换组 */
.price-toggle-group {
    display: flex;
    gap: 8px;
}
.price-toggle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 居中内容 */
    padding: 0 10px; /* 移除上下 padding，由 height 控制 */
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100px;
    height: 36px; /* 与数量、库存统一高度 */
    box-sizing: border-box;
}
.price-toggle-item:hover {
    border-color: #ffb366;
}
.price-toggle-item.active {
    border-color: var(--taobao-orange);
    background: #fff8f5;
}
.price-toggle-item .price-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--taobao-orange);
    line-height: 1.2;
}
.price-toggle-item:not(.active) .price-value {
    color: #666;
}
.price-toggle-item .price-type-label {
    font-size: 10px;
    color: #999;
    line-height: 1.2;
}
.main-price, .main-price-tax {
    /* 移除原有样式，由 .price-value 接管 */
}

.sku-selector {
    margin-bottom: 4px;
}

.sku-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.sku-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.sku-item {
    position: relative;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
    min-height: 28px;
    white-space: nowrap;
}

.sku-item:hover {
    border-color: var(--taobao-orange);
    color: var(--taobao-orange);
}

.sku-item.selected {
    border-color: var(--taobao-orange);
    background: #fffefb;
    border-width: 2px;
    font-weight: 600;
    color: var(--taobao-orange);
}

.sku-item .admin-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    font-size: 12px;
    display: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    z-index: 10;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0;
    line-height: 1;
}

.sku-item:hover .admin-delete {
    display: flex;
}

.sku-item.add-sku-title-btn {
    border-style: dashed;
    color: #999;
}

.sku-item.is-dragging {
    opacity: 0.4;
    border: 2px dashed var(--taobao-orange);
}

/* SKU 缩图容器 */
.sku-thumbs-wrap {
    padding: 0;
    background: #fff;
    position: relative;
    flex: 0 0 auto; /* 自然高度 */
    display: flex;
    flex-direction: column;
}

.sku-thumbs-container {
    position: relative;
    margin: 0;
    padding: 0;
    flex: 0 0 auto; /* 自然高度 */
    display: flex;
    flex-direction: column;
}

.sku-thumbs-scroll {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 增加到 5 列，充分利用右侧较宽的空间 */
    gap: 8px; /* 增加间距 */
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important; /* 取消内部滚动，交给外层容器 */
    max-height: none !important;  /* 取消高度限制 */
    padding: 2px;       /* 留出阴影空间 */
    justify-content: start;
    align-items: start; /* 顶部对齐 */
    position: relative;
}

.sku-thumbs-scroll::-webkit-scrollbar {
    width: 6px;
}
.sku-thumbs-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sku-thumbs-scroll::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px;
}
.sku-thumbs-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}

/* SKU 滚动导航按钮（已改为上下滚动，隐藏左右按钮） */
.product-buy-info > .sku-thumb-nav {
    display: none; /* 隐藏左右导航按钮 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    color: #333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s;
    /* 默认隐约显示，但可见 */
    opacity: 0.7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-buy-info > .sku-thumb-prev {
    left: 4px;
}

.product-buy-info > .sku-thumb-next {
    right: 4px;
}

.product-buy-info:hover > .sku-thumb-nav:not(:disabled):not(.is-disabled) {
    /* hover 容器时按钮更明显 */
    opacity: 0.9;
}

.sku-thumb-nav:hover:not(:disabled):not(.is-disabled) {
    opacity: 1 !important;
    border-color: var(--taobao-orange);
    background: #fff;
    color: var(--taobao-orange);
    box-shadow: 0 3px 12px rgba(255, 80, 0, 0.5);
    transform: translateY(-50%) scale(1.15);
}

.sku-thumb-nav:disabled,
.sku-thumb-nav.is-disabled {
    opacity: 0.2 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.product-note-area {
    margin-bottom: 15px;
    min-height: 40px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s;
}

body[data-admin] .product-note-area:hover {
    border-color: var(--taobao-orange);
    background: #fffefb;
}

body[data-admin] .product-note-area.drag-over {
    border: 2px solid var(--taobao-orange);
    background: rgba(255, 80, 0, 0.05);
}

.product-note-content {
    color: #444;
    line-height: 1.8;
}

.product-note-area .note-placeholder {
    color: #999;
    font-size: 13px;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
}

.admin-editable-note {
    outline: none;
    min-height: 30px;
    word-break: break-word;
    font-size: 15px;
}

/* 详情页右侧顶部标题：更大更醒目（同步首页内容） */
.admin-title-note{
    font-size: 16px; /* 从 18px 减小到 16px */
    font-weight: 800;
    line-height: 1.25;
    color: #333;
    padding: 15px;
    margin: 0;
    word-break: break-word;
}

body[data-admin] .admin-title-note{
    cursor: text;
}

.product-header-compact{
    padding: 0;
}

.product-header-title{
    padding-bottom: 8px;
}

/* 标题在顶部时的样式 */
.product-note-top {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 4px;
    overflow: visible;
}

.product-note-top .product-note-content {
    padding: 0;
}

.product-note-top .product-header-title {
    font-size: 16px; /* 从 18px 减小到 16px */
    font-weight: 800;
    color: #111;
    padding: 0 !important; /* 强制对齐 */
    line-height: 1.4; /* 增加行高，方便多行显示 */
    white-space: normal; /* 允许换行 */
    word-break: break-word;
    overflow: visible;
    text-align: left;
    margin-bottom: 8px; /* 标题与下方间距 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行 */
    -webkit-box-orient: vertical;
}

/* 标题在上，编号在下 - 垂直堆叠布局 */
.product-header-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    overflow: visible;
    text-align: left;
}

.product-header-meta-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.product-header-meta-line {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    flex-wrap: wrap; /* 允许在非常窄的情况下换行 */
}

.product-header-meta-line .meta-sep {
    margin: 0 10px;
    color: #ccc;
}

/* 固定宽度的 meta 字段 */
.meta-item.meta-fixed {
    display: inline-flex;
    align-items: center;
    gap: 2px; /* “标签：值”间距最小 */
    min-width: 0;
}

.product-header-meta-line .meta-item{
    display: inline-flex;
    align-items: center;
    gap: 2px; /* “标签：值”间距最小 */
}

.meta-item.meta-fixed .meta-v {
    min-width: 0;
}

.product-header-meta-line{
    display: flex;
    align-items: center;
    gap: 0; /* 间距由分隔符统一控制，保证三段间距一致 */
    padding: 0 0 5px; /* 移除左内边距，减少底内边距，与标题对齐 */
    font-size: 12px; /* 增加 1px，现在是 12px */
    color: #666;
    white-space: nowrap;
    min-width: 0;
}

.product-header-meta-line .meta-k{
    color: #777;
}

.product-header-meta-line .meta-k::after{
    content: '：';
    margin-left: 0;
}

.product-header-meta-line .meta-sep{
    flex: 0 0 auto;
    display: inline-block;
    margin: 0 12px; /* 缩小间距 */
    color: #bbb;
}

/* 让“库存编号：/零件编号：”更靠近分隔符（靠右侧） */
.product-header-meta-line .meta-sep.sep-1,
.product-header-meta-line .meta-sep.sep-2{
    margin-right: 6px;
}

.product-header-meta-line .meta-v{
    color: #333;
    font-weight: 600;
    /* 取消强制省略，展示完整内容 */
    min-width: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.product-header-meta-line .meta-link {
    color: #0070f3;
    text-decoration: none;
    transition: color 0.2s;
}

.product-header-meta-line .meta-link:hover {
    color: #ff5000;
    text-decoration: underline;
}

.product-header-meta-line .meta-sub-sep {
    margin: 0 6px;
    color: #999;
    font-weight: 400;
    font-family: serif; /* 让箭头看起来更优雅 */
}

.product-header-meta-line .meta-subcat {
    font-size: 0.92em;
    font-weight: 400; /* 不加粗 */
    opacity: 0.85;
}

/* meta 宽度策略：由内容撑开，不再固定宽度 */
.meta-item.meta-manufacturer {
    flex: 0 0 auto;
}
.meta-item.meta-flt {
    flex: 0 0 auto;
    justify-content: flex-start;
}
.meta-item.meta-mpn {
    flex: 1 1 auto;
    min-width: 0; /* 允许在 flex 下正确省略 */
}
.meta-item.meta-mpn .meta-v{
    max-width: 100%;
    color: #111;
    font-weight: 700;
}

body[data-admin] .product-header-meta-line [data-role="flt"],
body[data-admin] .product-header-meta-line [data-role="mpn"]{
    cursor: text;
    padding: 1px 3px;
    border-radius: 3px;
}

/* 确保编辑状态下文字清晰 */
.admin-editing {
    outline: 2px solid var(--taobao-orange) !important;
    background: #fff !important;
    box-shadow: 0 0 15px rgba(255, 80, 0, 0.1);
    z-index: 100;
}

body[data-admin] .product-note-area .admin-delete {
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    z-index: 50;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.15);
    color: #fff;
    border-radius: 50%;
    border: none;
}

.product-note-area .admin-delete {
    display: none;
}

.product-note-area .admin-delete:hover {
    background: #ff4d4f;
}

.sku-thumb-item {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    position: relative;
    width: 100%;
    height: 100%; 
    min-height: 100px; /* 稍微减小最小高度 */
    padding: 0; /* 移除内边距，让缩略图占满宽度 */
    box-sizing: border-box;
}

.sku-thumb-item.active {
    border-color: var(--taobao-orange);
    box-shadow: inset 0 0 0 1px var(--taobao-orange); /* 使用内阴影避免撑开 */
}

.sku-thumb-item .sku-thumb-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff; /* 保持纯白背景，与框体融为一体 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sku-thumb-item .sku-thumb-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 改为 contain，防止 Windows 下图片被切掉半截 */
    padding: 2px;
    box-sizing: border-box;
}

.sku-thumb-item .sku-thumb-title {
    width: 100%;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.2; /* 稍微增加行高，更易读 */
    text-align: center;
    color: #333;
    background: #fff;
    height: 26.4px; /* 精确计算：font-size(11) * line-height(1.2) * lines(2) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.sku-thumb-item.sku-title-only::before {
    content: '📷';
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    font-size: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* 编辑模式下：小缩图（类似首页） */
/* 编辑模式下 SKU 容器必须可见 */
/* 编辑模式下确保 SKU 容器可见且左右排列 */
body[data-admin] .sku-thumbs-wrap {
    display: block !important;
    visibility: visible !important;
}

body[data-admin] .sku-thumbs-container {
    display: block !important;
    visibility: visible !important;
}

body[data-admin] .sku-thumbs-scroll {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 编辑模式也保持 5 列 */
    gap: 8px;
    visibility: visible !important;
    max-height: none; /* 取消高度限制 */
    overflow-y: auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* 编辑模式下 SKU 缩图尺寸与前台一致 */
body[data-admin] .sku-thumb-item {
    flex: 0 0 auto !important;
    border-radius: 4px;
    width: 100% !important;
    height: 100% !important;
    min-height: 100px !important;
}

body[data-admin] .sku-thumb-item.sku-combined {
    width: 100% !important;
    height: 100% !important;
}

body[data-admin] .sku-thumb-item.sku-title-only {
    width: 100% !important;
    height: 100% !important;
}

/* 前台模式下：有缩图的 SKU：缩图在上，标题在下 */
.sku-thumb-item.sku-combined {
    width: 100%; 
    flex: 0 0 auto;
    min-height: 80px; 
}

.sku-thumb-item .sku-thumb-image {
    width: 100%; /* 缩图占满宽度 */
    aspect-ratio: 1/1; /* 保持正方形 */
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 4px 4px 0 0;
    position: relative; 
}

.sku-thumb-item .sku-thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sku-thumb-item .sku-thumb-title {
    width: 100%;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #333;
    background: #fff;
    height: 26.4px; /* 固定高度确保对齐，防止第三行露出 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    box-sizing: border-box;
}

/* 编辑模式下标题可编辑 */
.sku-thumb-item .sku-thumb-title.admin-editable {
    cursor: text;
    border-radius: 3px;
    transition: background 0.2s;
}

.sku-thumb-item .sku-thumb-title.admin-editable:hover {
    background: rgba(255, 80, 0, 0.05);
}

.sku-thumb-item .sku-thumb-title.admin-editable:focus {
    outline: 2px solid var(--taobao-orange);
    background: #fff;
}

/* 编辑模式：标题可编辑即可，不要出现红色框（激活态由整行/文字颜色体现） */
body[data-admin] .sku-thumb-item .sku-thumb-title.admin-editable:focus{
    outline: none;
}

/* SKU 缩图删除按钮：仅鼠标在缩图上时显示；无缩图则不会渲染按钮 */
body[data-admin] .sku-thumb-item .sku-thumb-image .thumb-del{
    position: absolute;
    left: 2px; /* 移到左上角 */
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 77, 79, 0.9);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
body[data-admin] .sku-thumb-item .sku-thumb-image:hover .thumb-del,
body[data-admin] .sku-thumb-item .sku-thumb-image .thumb-del:hover{
    opacity: 1;
    pointer-events: auto;
}

/* Safety: hide any injected delete button that sits on the SKU row (should only exist inside .sku-thumb-image) */
body[data-admin] .sku-thumb-item > .thumb-del{
    display: none !important;
}

/* 删除 SKU 按钮（移动到右上角） */
body[data-admin] .sku-thumb-item .sku-del-btn{
    position: absolute;
    right: 4px; /* 移到右上角 */
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 77, 79, 0.35);
    background: rgba(255, 255, 255, 0.9);
    color: #ff4d4f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s;
}

body[data-admin] .sku-thumb-item:hover .sku-del-btn {
    opacity: 1; /* hover 时显示 */
}
body[data-admin] .sku-thumb-item .sku-del-btn:hover{
    background: rgba(255, 77, 79, 0.16);
    border-color: rgba(255, 77, 79, 0.55);
}

.sku-thumb-item .thumb-del:hover {
    background: #ff4d4f;
    transform: scale(1.1);
}
}

/* hover 状态 */
.sku-thumb-item.sku-title-only:hover:not(.active) {
    border-color: var(--taobao-orange);
}

/* active 状态 */
.sku-thumb-item.sku-title-only.active {
    border: 2px solid var(--taobao-orange) !important;
    box-shadow: 0 0 0 2px rgba(255, 80, 0, 0.1);
}

.sku-thumb-item.sku-title-only.active .sku-thumb-title {
    color: var(--taobao-orange);
    font-weight: 600;
}

.sku-thumb-item.sku-title-only .sku-thumb-title {
    padding: 2px 4px;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
    color: #333;
    height: 26.4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    box-sizing: border-box;
}

.sku-thumb-item.add-sku-btn {
    width: 100%;
    flex: 0 0 auto;
    height: 100%;
    min-height: 110px;
    background: #f9f9f9;
    position: relative;
    z-index: 2;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.sku-thumb-item.add-sku-btn:hover {
    border-color: var(--taobao-orange);
    background: #fff;
}

/* 添加按钮的图片区域 */
.sku-thumb-item.add-sku-btn .sku-thumb-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sku-thumb-item.add-sku-btn .sku-thumb-image > div {
    font-size: 32px;
    color: #bbb;
    line-height: 1;
}

/* 添加按钮的标题区域 */
.sku-thumb-item.add-sku-btn .sku-thumb-title {
    padding: 4px;
    font-size: 11px;
    text-align: center;
    color: #999;
    width: 100%;
    background: transparent;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hover 只在非 active 项目上显示，避免两个红框 */
.sku-thumb-item:hover:not(.active) {
    border-color: var(--taobao-orange);
}

.sku-thumb-item.active {
    border: 2px solid var(--taobao-orange) !important;
    box-shadow: 0 0 0 2px rgba(255, 80, 0, 0.1);
}

.sku-thumb-item.active .sku-thumb-title {
    color: var(--taobao-orange);
    font-weight: 600;
}

/* 禁用无价格的 SKU */
.sku-thumb-item.sku-disabled {
    opacity: 0.5;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
    background: #f5f5f5 !important;
}

/* 编辑模式下：无价格的 SKU 显示为灰色但仍可操作 */
.sku-thumb-item.sku-no-price {
    opacity: 0.5;
    filter: grayscale(0.8);
    background: #f9f9f9;
}

.sku-thumb-item.sku-no-price:hover {
    opacity: 0.7;
}

.sku-thumb-item.sku-no-price.active {
    opacity: 0.8;
    filter: grayscale(0.5);
}

.sku-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 编辑模式下：缩图样式与首页一致 */
body[data-admin] .sku-thumb-item .sku-thumb-image {
    width: 50px; /* 与前台一致：缩图在左 */
    height: 50px;
    min-width: 50px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 4px;
}

/* 移除编辑模式下可能导致不一致的特殊覆盖 */
body[data-admin] .sku-thumb-item {
    padding: 0 !important;
}

body[data-admin] .sku-thumb-item .sku-thumb-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

body[data-admin] .sku-thumb-item .sku-thumb-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    padding: 0 !important;
    display: block !important;
}

body[data-admin] .sku-thumb-item .sku-thumb-title {
    height: 26.4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body[data-admin] .sku-thumb-item.active {
    border-color: var(--taobao-orange);
    box-shadow: 0 0 0 2px rgba(255, 80, 0, 0.1);
}

.sku-thumbs-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    color: #999;
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 8px;
    padding: 10px 12px;
}

.action-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 0; /* 移除顶部间距，紧贴上方价格区 */
    padding-top: 0;
    border-top: none; /* 移除分隔线 */
    position: relative;
    z-index: 10;
    background: #fff;
}

.btn-buy-now,
.btn-inquire-price,
.btn-add-cart {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 6px;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.25;
    border-radius: 4px;
    white-space: nowrap;
    overflow: visible;
}

.btn-inquire-price {
    background: #fff;
    color: #2563eb;
    border: 1px solid #2563eb;
    cursor: pointer;
}

.btn-buy-now {
    background: #ffeded;
    color: var(--taobao-orange);
    border: 1px solid var(--taobao-orange);
}

.btn-add-cart {
    background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
    color: white;
    border: none;
}

/* 详情页：与首页一致「立即购买 → 加入购物袋 → 询价」；flex order 纠正旧缓存/旧 HTML 中的中间「询价」 */
.product-buy-info > .action-buttons .btn-buy-now { order: 1; }
.product-buy-info > .action-buttons .btn-add-cart { order: 2; }
.product-buy-info > .action-buttons .btn-inquire-price { order: 3; }

.card-buy-now:disabled,
.card-add-cart:disabled {
    background: #f5f5f5 !important;
    color: #ccc !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.btn-buy-now:disabled,
.btn-add-cart:disabled {
    background: #f5f5f5 !important;
    color: #ccc !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.tabs-header {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 42px;
}

/* =================================================================
   搜索框统一样式 (首页与详情页)
   ================================================================= */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    height: 38px;
    width: 320px;
}

.search-container:focus-within {
    background: #fff;
    border-color: var(--taobao-orange, #ff5000);
    box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.08);
}

.search-container .search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    color: rgba(0, 0, 0, 0.35);
    transition: color 0.12s ease;
}
.search-container:focus-within .search-icon {
    color: var(--taobao-orange, #ff5000);
}

.search-input {
    flex: 1;
    border: none !important;
    padding: 0 14px 0 10px !important;
    font-size: 14px !important;
    height: 100% !important;
    outline: none !important;
    background: transparent !important;
    transition: opacity 0.1s ease;
}

.btn-search {
    position: static !important;
    background: var(--taobao-orange, #ff5000) !important;
    color: #fff !important;
    border: none !important;
    padding: 0 18px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.12s ease, transform 0.1s ease !important;
    border-radius: 0 20px 20px 0 !important;
}

.btn-search:hover {
    background: #e64500 !important;
}

.btn-search:active {
    transform: scale(0.98);
}

/* 详情页搜索框 - 与首页一致 */
.tab-search-container {
    flex-shrink: 0;
    margin-left: 16px;
    display: flex;
    align-items: center;
}

.tab-search-container .search-container {
    width: 320px;
    height: 38px;
    margin: 0;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.tab-search-container .search-container:focus-within {
    background: #fff;
    border-color: var(--taobao-orange, #ff5000);
    box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.08);
}

.tab-search-container .search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    color: rgba(0, 0, 0, 0.35);
    transition: color 0.12s ease;
}
.tab-search-container .search-container:focus-within .search-icon {
    color: var(--taobao-orange, #ff5000);
}

.tab-search-container .search-input {
    padding: 0 14px 0 10px !important;
    font-size: 14px !important;
    width: auto;
}

.tab-search-container .btn-search {
    border-radius: 0 20px 20px 0 !important;
}

/* 首页搜索框容器微调 */
.header-search-container .search-container {
    width: 320px;
    margin: 0;
}


.tab-btn {
    padding: 0 30px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid #eee;
}

.tab-btn.active {
    background: white;
    color: var(--taobao-orange);
    font-weight: 600;
    border-bottom: none !important;
}

.tab-content {
    padding: 0 !important;
    background: #fff !important;
    display: block !important;
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    min-height: 200px; /* 保留最小高度，不设置固定高度，取消滚动 */
    overflow: visible !important;
}

/* 优化滚动条外观 */
.tab-content::-webkit-scrollbar {
    width: 10px;
}
.tab-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.tab-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
.tab-content::-webkit-scrollbar-thumb:hover {
    background: var(--taobao-orange);
}

#specs-table {
    width: 100%;
    border-collapse: collapse;
}

#specs-table td {
    padding: 12px;
    border: 1px solid #efefef;
    font-size: 13px;
}

#specs-table td:first-child {
    background: #f9f9f9;
    width: 200px;
    color: #999;
}

/* Search styles moved to unified section */


/* Cart Toggle & Sidebar */
.cart-toggle {
    position: relative;
    padding: 8px 15px;
    background: #f8f8f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cart-count {
    background: var(--taobao-orange);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

.support-toggle {
    position: relative;
    padding: 8px 15px;
    background: #f8f8f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.support-toggle:hover {
    background: #f0f0f0;
}

/* 普通账户「客服消息」与管理员一致：左侧 💬 图标 + 文案 */
#contact-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}
#contact-support-btn:hover {
    color: var(--taobao-orange, #ff6700);
}

.support-icon {
    font-size: 16px;
}

.support-count {
    background: #ff4d4f;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
}

.support-count:empty {
    display: none;
}

/* 购物袋与聊天框统一：贴右、全高、460px 宽，从右往左滑入 */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cart-sidebar-width, 460px);
    height: 100vh;
    min-height: 100%;
    background: white;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.cart-sidebar.open {
    transform: translateX(0);
}

/* 客服侧栏打开时强制收起并隐藏购物袋，避免与对话框重叠 */
body.support-sidebar-open .cart-sidebar {
    transform: translateX(100%) !important;
    z-index: 999;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.support-sidebar-open .cart-sidebar.open {
    transform: translateX(100%) !important;
}

@keyframes cartFlash {
    0% { background-color: #fff; }
    50% { background-color: #fff7f0; }
    100% { background-color: #fff; }
}

.cart-sidebar.add-flash {
    animation: cartFlash 0.5s ease-in-out;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-close-cart {
    font-size: 24px;
    background: none;
    color: #999;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border: 1px solid #eee;
}

.cart-item-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.4;
    color: #333;
}

.cart-item-price {
    color: var(--taobao-orange);
    font-weight: bold;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 18px;
}

.btn-checkout {
    width: 100%;
    padding: 15px;
    background: var(--taobao-orange);
    color: white;
    font-weight: bold;
    border-radius: 4px;
}

/* Modal Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* 客服侧边栏触发：Chrome 扩展式小图标，固定右侧，点击弹出侧栏 */
.support-sidebar-trigger {
    position: fixed;
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 1999;
    border-radius: 12px 0 0 12px;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    user-select: none;
    border: none;
    outline: none;
}
.support-sidebar-trigger:hover {
    background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
    box-shadow: -3px 0 16px rgba(0,0,0,0.2);
}
.support-sidebar-trigger:active {
    transform: translateY(-50%) scale(0.96);
}
.support-sidebar-trigger.hidden {
    display: none;
}

/* 联系客服窗口：全屏遮罩层，弹窗贴右侧，避免与购物袋区域重叠 */
.modal-overlay#support-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: transparent;
    pointer-events: none;
    display: none;
    justify-content: flex-end;
    align-items: stretch;
    z-index: 2000;
}

/* 侧边栏打开时左侧主站区不铺遮罩，保持可点击；点击侧边对话区以外由 JS 收起侧栏 */
.modal-overlay#support-modal > * {
    pointer-events: auto; /* 弹窗本身可以交互 */
}

.modal {
    background: white;
    padding: 40px;
    border-radius: 8px;
    width: 400px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal.modal-checkout{
    width: min(560px, calc(100vw - 40px));
    padding: 26px 24px;
    max-height: 90vh;
    overflow-y: auto;
}

/* 联系客服弹窗 - 高度覆盖整屏，输入靠底，消息区最大化 */
.modal.support-modal {
    width: 460px;
    min-width: 320px;
    max-width: calc(100vw - 20px);
    min-height: 240px;
    height: 100vh;
    max-height: 100vh;
    display: none;
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    background: #fff;
    margin: 0;
    animation: slideInFromRight 0.3s ease-out;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2001;
    pointer-events: auto;
}

/* 自定义调整宽度手柄 */
.support-modal-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    cursor: ew-resize;
    z-index: 10;
    transition: background 0.2s;
}

.support-modal-resize-handle:hover {
    background: rgba(24, 144, 255, 0.3);
}

.support-modal-resize-handle.active {
    background: rgba(24, 144, 255, 0.5);
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.support-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    height: 35px; /* 与 global-nav 一致，使「当前账号」与网页第一行对齐 */
    min-height: 35px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.support-modal-title {
    display: none; /* 隐藏"联系客服"标题 */
}
.support-account-info {
    font-size: 12px;
    color: #888;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.support-account-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
}
.support-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.support-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.support-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    pointer-events: auto; /* 确保关闭按钮可以点击 */
    z-index: 10; /* 确保在最上层 */
    position: relative;
}
.support-modal-close:hover {
    background: #eee;
    color: #333;
}
.support-new-msg-toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: var(--taobao-orange, #ff5000);
    color: #fff;
    font-size: 13px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
    animation: support-toast-in 0.25s ease;
}
@keyframes support-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.support-login-required {
    padding: 24px 20px;
    text-align: center;
    background: #fafafa;
    border-radius: 8px;
    margin: 16px;
}
.support-login-required a { color: var(--taobao-orange); }
.support-chat-wrap {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 6px 10px;
    background: #f7f8fa;
}
.support-chat-wrap.support-chat-wrap-admin {
    flex-direction: row;
    padding: 0;
}
.support-admin-conv-list {
    width: 180px;
    min-width: 160px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}
.support-admin-conv-list-title {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    flex-shrink: 0;
}
.support-admin-conv-filter {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    flex-shrink: 0;
}
.support-admin-conv-filter-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.support-admin-conv-filter-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}
.support-admin-conv-filter-btn.active {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
}
.support-admin-conv-item {
    position: relative;
}
.support-admin-conv-unread-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #ff4d4f;
    border-radius: 9px;
    box-sizing: border-box;
}
.support-admin-conv-list-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.support-admin-conv-item {
    padding: 8px 28px 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
    border-left: 3px solid transparent;
    position: relative;
}
.support-admin-conv-item:hover { background: #f5f5f5; }
.support-admin-conv-item.active {
    background: #e6f7ff;
    border-left-color: #1890ff;
}
.support-admin-conv-item.unread { background: #f0f7ff; }
.support-admin-conv-item.unread.active { background: #e6f7ff; }
.support-admin-conv-body {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.support-admin-conv-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;
}
.support-admin-conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.support-admin-conv-main {
    flex: 1;
    min-width: 0;
}
.support-admin-conv-time {
    font-size: 10px;
    color: #999;
    margin-bottom: 4px;
}
.support-admin-conv-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.support-admin-conv-phone {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}
.support-admin-conv-preview {
    font-size: 11px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.support-admin-conv-del {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: #999;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.support-admin-conv-del:hover {
    color: #ff4d4f;
    background: rgba(255, 77, 79, 0.1);
}
.support-chat-main {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 6px 10px;
    background: #f7f8fa;
}
.support-chat-wrap.support-chat-wrap-admin .support-chat-main { padding: 8px 6px 10px; }
/* 消息列表区域最大化：占满头部与输入行之间的全部空间，与侧边间距最小 */
#support-messages.support-messages,
.support-messages {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    /* 避免浏览器 scroll anchoring 与程序化滚底争抢，减轻文字上下微抖 */
    overflow-anchor: none;
    padding: 6px 6px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* 程序化滚底须立即到位；若用 smooth 会与图片加载后多次 scroll 冲突，导致底部仍被裁切 */
    scroll-behavior: auto;
    /* 底部留白适中；过大 padding 会加大 scrollHeight 变化幅度，与滚底叠在一起易产生观感抖动 */
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
}
.support-messages::-webkit-scrollbar { width: 6px; }
.support-messages::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }
.support-messages::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }
/* 避免 flex 子项被压缩导致总高度≤视口、无法向上滚动查看历史 */
.support-messages > .support-msg {
    flex-shrink: 0;
    overflow-anchor: none;
}
/* 单条消息：时间在上方，名称与气泡同一行左对齐（客户端与管理端一致） */
.support-msg {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 95%;
}
.support-msg.admin {
    align-items: flex-end;
    margin-left: auto;
}
/* 时间统一显示在消息上方 */
.support-msg-time {
    font-size: 10px;
    color: #8c8c8c;
    margin-bottom: 2px;
    display: block;
    width: 100%;
}
.support-msg.admin .support-msg-time {
    text-align: right;
}
/* 名称（头像）与消息气泡同一行、顶部对齐 */
.support-msg-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    width: 100%;
}
.support-msg.admin .support-msg-row {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.support-msg-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 8px;
    background: #f0f0f0;
    color: #555;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.support-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.support-msg-avatar-fallback {
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
}
.support-msg.admin .support-msg-avatar {
    background: #e8f4ff;
    color: var(--primary-blue);
    border-color: rgba(24, 144, 255, 0.3);
}
.support-msg-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 46px);
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-start;
    padding-top: 0;
}
.support-msg.buyer .support-msg-content {
    align-items: flex-start;
}
.support-msg.admin .support-msg-content {
    align-items: flex-end;
    max-width: calc(100% - 46px);
    flex-shrink: 0;
    min-width: min-content;
}
/* 管理员气泡与普通账户一致：由内容撑开宽度，避免短消息被挤换行 */
.support-msg.admin .support-msg-bubble {
    width: max-content;
    max-width: 100%;
    flex-shrink: 0;
}
.support-msg-bubble {
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 20px;
    text-align: left;
    box-sizing: border-box;
}
.support-msg-bubble::-webkit-scrollbar { height: 4px; }
.support-msg-bubble::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.support-msg.buyer .support-msg-bubble {
    background: #fff;
    color: #333;
    border: 1px solid #eee;
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.support-msg.buyer .support-msg-bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 8px;
    border: 6px solid transparent;
    border-right-color: #fff;
    border-left: none;
}
.support-msg.buyer .support-msg-bubble::after {
    content: '';
    position: absolute;
    left: -7px;
    bottom: 7px;
    border: 7px solid transparent;
    border-right-color: #eee;
    border-left: none;
}
.support-msg.admin .support-msg-bubble {
    background: var(--primary-blue);
    color: #fff;
    border-radius: 12px 4px 12px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.support-msg.admin .support-msg-bubble::before {
    content: '';
    position: absolute;
    right: -6px;
    bottom: 8px;
    border: 6px solid transparent;
    border-left-color: var(--primary-blue);
    border-right: none;
}
.support-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}
.support-input-wrap {
    flex: 1;
    min-width: 0;
}
/* 输入内容框：一个边框内同时放图片预览和输入区，支持在图片旁输入文字 */
.support-input-inner {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.support-input-inner:focus-within {
    border-color: var(--taobao-orange);
}
.support-input-row .support-input {
    flex: 1;
    min-width: 0;
    min-height: 28px;
    max-height: 120px;
    resize: none;
    padding: 2px 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    background: transparent;
    outline: none;
    box-sizing: border-box;
}
.support-inline-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.support-inline-preview img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #eee;
    background: #f9f9f9;
    vertical-align: bottom;
    cursor: pointer;
}
.support-inline-preview-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
}
.support-inline-preview-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--taobao-orange, #ff6700);
    border-radius: 50%;
    animation: support-inline-spin 0.8s linear infinite;
}
@keyframes support-inline-spin {
    to { transform: rotate(360deg); }
}
.support-inline-preview-remove {
    width: 22px;
    height: 22px;
    border: none;
    background: #e0e0e0;
    color: #555;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.support-inline-preview-remove:hover {
    background: #ccc;
    color: #333;
}
/* 区域选择截图：半透明遮罩 + 拖拽框 */
.support-screenshot-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.35);
    cursor: crosshair;
}
.support-screenshot-overlay.active {
    display: block;
}
.support-screenshot-crop-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
}
.support-screenshot-crop-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.support-screenshot-selection {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 2px solid var(--taobao-orange, #ff6700);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.25);
    pointer-events: none;
    box-sizing: border-box;
}
.support-screenshot-hint {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 13px;
    border-radius: 8px;
    pointer-events: none;
}
.support-screenshot-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.support-screenshot-btn:hover {
    background: #e0e0e0;
    color: #333;
}
.support-screenshot-btn svg,
.support-screenshot-btn img {
    display: block;
    object-fit: contain;
}
.support-send-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--taobao-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.2s;
}
.support-send-btn:hover { opacity: 0.9; }
.support-order-link-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(24,144,255,0.12);
    border-radius: 8px;
    font-size: 12px;
    color: #1890ff;
}
.support-msg-bubble .support-msg-link {
    color: #1890ff;
    text-decoration: underline;
    word-break: break-all;
}
/* 纯图片消息：图片占满气泡；含文字链接时保留内边距（询价整图链接不算 .support-msg-link） */
.support-msg-bubble:has(.support-msg-img-wrap):not(:has(.support-msg-link)) {
    padding: 0;
    overflow: hidden;
}
.support-msg-bubble:has(.support-msg-link) .support-inquiry-sku-img {
    margin-top: 8px;
}
/* 三行询价：上方「询价 + 链接」，下方 SKU 图 */
.support-inquiry-sku-head {
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}
/* 询价仅展示 SKU 图：整图可点进商品页，无图下方文字 */
.support-inquiry-sku-img-link {
    display: inline-block;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    outline: none;
    border-radius: inherit;
}
.support-msg-bubble .support-msg-img-wrap {
    display: block;
    background: transparent;
    padding: 0;
    border-radius: inherit;
    cursor: pointer;
    line-height: 0;
}
.support-msg-bubble .support-msg-img-wrap .support-msg-img {
    max-width: 240px;
    max-height: 240px;
    width: auto;
    height: auto;
    display: block;
    border-radius: inherit;
    vertical-align: middle;
    object-fit: contain;
}
.support-msg-bubble .support-msg-img-wrap:hover .support-msg-img {
    opacity: 0.92;
}
.support-msg-bubble .support-msg-img {
    max-width: 100%;
    max-height: 280px;
    border-radius: inherit;
    display: block;
    cursor: pointer;
    object-fit: contain;
}
.support-msg-bubble .support-msg-img:hover {
    opacity: 0.92;
}
/* 点击图片放大 2 倍，对齐屏幕右侧垂直居中；再点击或鼠标移出关闭 */
.support-img-inplace {
    position: fixed;
    z-index: 10000;
    overflow: visible;
    display: none;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    /* right/top/transform/width/height 由 JS 设置，右侧贴边、垂直居中 */
}
.support-img-inplace:focus {
    outline: none;
}
.support-img-inplace.show {
    display: block;
}
.support-img-inplace img {
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: top right;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    border-radius: 6px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    /* width/height/transform 由 JS 设置 */
}
.support-img-inplace img::selection {
    background: transparent;
}
.support-msg.admin .support-msg-bubble .support-msg-link {
    color: rgba(255,255,255,0.95);
    text-decoration: underline;
}

.modal textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

.checkout-summary{
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0 16px;
    max-height: 240px;
    overflow-y: auto;
}

.checkout-title{
    font-size: 15px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    margin-bottom: 10px;
}

.checkout-meta{
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.checkout-meta-row{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #666;
}
.checkout-meta-row b{
    color:#222;
    font-weight: 700;
}

.checkout-price-row{
    display:flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: baseline;
    font-size: 13px;
    color: #666;
}
.checkout-price-row b{
    color: var(--taobao-orange);
    font-weight: 800;
}
.checkout-price-spacer{
    flex: 1;
    min-width: 10px;
}

.modal h2 {
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-group-recipient-with-paste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recipient-label-row {
    display: flex;
    align-items: center;
}
.recipient-label-row > label {
    margin: 0;
    font-size: 13px;
    color: #666;
}
.recipient-label-row > .paste-recipient-btn {
    margin-left: auto;
}
.form-group-recipient-with-paste > #order-name {
    width: 100%;
}

.form-group-phone-row {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
}
.form-group-phone-row .phone-ext-row {
    flex: 1;
    min-width: 0;
}
.form-group-phone-row .phone-ext-row:last-child {
    flex: 0 0 100px;
}
.form-group-phone-row .phone-ext-row label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}
.form-group-phone-row .phone-ext-row input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.paste-recipient-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #d4380d;
    background: #fff2e8;
    border: 1px solid #ffbb96;
    border-radius: 4px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.paste-recipient-btn:hover {
    color: #fff;
    border-color: var(--taobao-orange, #ff5000);
    background: var(--taobao-orange, #ff5000);
}
.paste-recipient-btn::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4380d' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
.paste-recipient-btn:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--primary-blue);
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin-top: 10px;
}

.attachments-area {
    margin-top: 0 !important;
    margin-bottom: 20px !important; /* 底部留白 20px */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    min-height: 400px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.detail-section {
    margin-bottom: 24px;
}
.detail-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

body[data-admin] .attachments-area.drag-over {
    border-color: var(--taobao-orange);
    background: #fff8f5;
}

.drop-zone-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #bbb;
    font-size: 14px;
    background: #fff;
}

.attachment-item {
    position: relative;
    width: 100%;
    background: transparent !important;
    margin-bottom: 20px;
}

.attachment-text-box,
.attachment-richtext-box {
    /* 只展示文字内容：不要“文本框”外观 */
    background: transparent !important;
    padding: 0 !important;
    padding-left: 0 !important; /* 取消左边距，完全对齐 */
    padding-top: 0 !important;  /* 取消顶边距 */
    padding-bottom: 0 !important; 
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.attachment-text-box {
    white-space: pre-wrap;
    word-break: break-word;
}

.attachment-richtext-box img {
    max-width: 100%;
    height: auto;
    border-radius: 0; /* 贴合边缘 */
    margin: 0; /* 移除图片的外边距 */
    display: block; /* 消除下方缝隙 */
}

.attachment-richtext-box table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.attachment-richtext-box td, 
.attachment-richtext-box th {
    padding: 10px;
    border: 1px solid #eee;
}

/* 确保富文本区域内的列表显示圆点 */
.attachment-richtext-box ul,
.product-note-content ul {
    list-style-type: disc !important;
    margin: 8px 0;
    padding-left: 24px;
}

.attachment-richtext-box ol,
.product-note-content ol {
    list-style-type: decimal !important;
    margin: 8px 0;
    padding-left: 24px;
}

.attachment-richtext-box li,
.product-note-content li {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 6px 0;
}

.attachment-item.pdf-item {
    background: #fff !important;
    padding: 0 !important;
    width: 100%;
    overflow: hidden;
}

.attachment-item.pdf-item iframe {
    width: 100%;
    height: 1200px;
    border: none !important;
    display: block;
    background: #fff !important;
}

/* PDF thumbnail card */
.attachment-pdf {
    background: transparent;
}

.attachment-pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.attachment-pdf-tile {
    position: relative;
    padding: 12px 16px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.attachment-pdf-tile:hover {
    border-color: var(--taobao-orange);
    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.08);
    transform: translateY(-1px);
}

.attachment-pdf-tile.is-active {
    border-color: var(--taobao-orange);
    border-width: 1px;
    background: #fff8f5;
    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.1);
}

.attachment-pdf-title-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.15s ease;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.attachment-pdf-title-btn:hover {
    color: var(--taobao-orange);
}

.attachment-pdf-download {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f7fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attachment-pdf-download:hover {
    background: var(--taobao-orange);
    color: #fff;
}

/* Admin PDF delete button - hanging off the top-right corner */
body[data-admin] .attachment-pdf-tile .admin-delete {
    display: flex !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #fff !important;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

body[data-admin] .attachment-pdf-tile:hover .admin-delete {
    opacity: 1;
    transform: scale(1.1);
}

/* Active PDF tile highlight */
.attachment-pdf-tile.is-active {
    border-color: var(--taobao-orange) !important;
    border-width: 2px !important;
    background: #fff8f5;
    padding: 5px 9px; /* adjust for border width */
}

.attachment-add-pdf-inline {
    cursor: pointer;
    border-style: dashed;
    color: #4b5563;
    gap: 8px;
}

.attachment-add-pdf-inline:hover {
    border-color: rgba(255, 80, 0, 0.35);
    color: var(--taobao-orange);
    background: #fff8f5;
}

.attachment-pdf-download:hover {
    color: var(--taobao-orange);
    border-color: rgba(255, 80, 0, 0.25);
    background: #fff8f5;
}

.attachment-pdf-viewer {
    margin-top: 10px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.attachment-pdf-iframe {
    width: 100%;
    height: 900px;
    border: none;
    display: block;
    background: #fff;
}

.attachment-pdf-preview {
    margin-top: 14px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* Admin: add PDF button */
body[data-admin] .attachment-add-pdf {
    padding: 14px 0;
}

body[data-admin] .attachment-add-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    cursor: pointer;
}

body[data-admin] .attachment-add-pdf-btn:hover {
    border-color: rgba(255, 80, 0, 0.35);
    color: var(--taobao-orange);
    background: #fff8f5;
}

.attachment-item img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    margin: 0;
}

.attachment-file-box {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #eee;
}

.attachment-file-icon {
    font-size: 32px;
}

.attachment-file-info {
    flex: 1;
}

.attachment-file-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.attachment-file-link {
    font-size: 12px;
    color: var(--primary-blue);
    text-decoration: underline;
}

body[data-admin] .attachment-item .admin-delete {
    display: flex;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    width: 24px;
    height: 24px;
    font-size: 18px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

body[data-admin] .attachment-item:hover .admin-delete {
    opacity: 1;
}

/* Skeleton Loading State */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Final fix for PDF background and border */
.pdf-item, .pdf-item iframe {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force PDF viewer to fit container width/height if possible */
iframe[src*=".pdf"] {
    background-color: #ffffff !important;
}