/* 1. 基础重置 - 对齐 Vue 项目全局 */
:root {
    --brand-red: #9a0000;
    --text-main: #101010;
    --text-muted: #666;
    --border-color: #ebebeb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #fff;
    color: var(--text-main);
    line-height: 1.5;
}
li { list-style: none; }
a { text-decoration: none; color: inherit; cursor: pointer; }

.con-main-wrap {
    width: 1400px;
    margin: 0 auto;
}
.header-user-wrap {
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    font-size: 14px;
}
.header-user-wrap .con-main-wrap {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    font-weight: 500;
}
.welcome-login, .user-info { display: flex; align-items: center; gap: 16px; }
.divider { width: 1px; height: 14px; background: #a2887d; margin: 0 10px; }
.active-red { color: #ff0005; }

/* 3. Header 搜索区域 */
.header-search-wrap { padding: 20px 0; }
.header-search-wrap .con-main-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
.logo { height: 82px; cursor: pointer; }
.search-area { flex: 1; max-width: 600px; }
.search-cate { display: flex; gap: 20px; margin-bottom: 5px; }
.search-cate span {
    padding: 8px 25px;
    font-size: 18px;
    color: #616161;
    cursor: pointer;
    border-radius: 8px;
}
.search-cate span.active { background: var(--brand-red); color: #fff; }

.search-box {
    display: flex;
    border: 3px solid var(--brand-red);
    border-radius: 5px;
    overflow: hidden;
}
.search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 15px;
    height: 43px;
    font-size: 16px;
}
.search-btn {
    width: 100px;
    background: var(--brand-red);
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
.header-code { height: 94px; }

/* 4. Tabbar 红色导航 */
.header-tabbar-wrap {
    background: var(--brand-red);
    height: 48px;
    position: relative;
}
.tab-nav { display: flex; color: #fff; }
.tab-item {
    padding: 0 30px;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}
.tab-item:hover { background: rgba(255,255,255,0.1); }
.tab-item .shu {
    position: absolute;
    right: 0;
    top: 15px;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.3);
}

/* 5. 面包屑 */
.bread-crumbs {
    display: flex;
    padding: 15px 0;
    font-size: 16px;
    gap: 10px;
}
.bread-item { color: #101010; cursor: pointer; }
.bread-sep { color: #999; margin: 0 5px; }

/* 6. 详情页主体布局 */
.details-container { display: flex; gap: 30px; padding-top: 20px; }
.details-left { width: 500px; }
.main-img-box {
    width: 500px;
    height: 490px;
    border: 1px solid #dadada;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.thumb-list { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.thumb-list::-webkit-scrollbar { display: none; }
.thumb-item {
    width: 84px;
    height: 56px;
    border: 1px solid transparent;
    padding: 2px;
    cursor: pointer;
}
.thumb-item.active { border-color: var(--brand-red); }
.thumb-item img { width: 100%; height: 100%; object-fit: contain; }

.details-right { flex: 1; }
.goods-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.goods-bn { color: #666; margin-bottom: 15px; }
.goods-recommend { color: #e6574f; font-size: 16px; margin-bottom: 20px; }

/* 价格区块 - 对齐原版红色渐变背景 */
.price-section {
    padding: 20px 40px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.price-row { display: flex; align-items: baseline; gap: 10px; color: #e6574f; }
.price-label { font-size: 18px;  }
.price-value { font-size: 32px;  }

/* 交互区块 */
.interact-row { display: flex; align-items: center; margin-bottom: 20px; padding-left: 40px; font-size: 14px; }
.interact-label { width: 80px; color: #666; }
.qty-box { display: flex; border: 1px solid #ccc; border-radius: 2px; }
.qty-btn { width: 60px; height: 50px; background: #f7f7f7; border: none; cursor: pointer; }
.qty-input { width: 50px; height: 50px; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; }

.action-btns { display: flex; gap: 15px; padding-left: 40px; margin-top: 30px; }
.btn {
    height: 46px;
    padding: 0 35px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
}
.btn-buy { background: #ff2e00; color: #fff; border-color: #ff2e00; }
.btn-cart { background: #9a0000; color: #fff; border-color: #9a0000; }
.btn-collect { background: #f7f7f7; color: #7b7b7b; }

/* 详情正文标题样式 */
.section-title {
    width: 100%;
    height: 58px;
    background: url(https://www.e1988.com/assets/btbj-D1yFO1Z7.jpg) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: none;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    color: #101010;
}
.section-title h5 {
    margin: 0;
    line-height: 1.2;
}
.section-title-text{
    color: #e5574f;
    margin: 10px 0 10px;
    font-size: 22px;
    font-weight: 600;
}
.section-title .title-line {
    width: 160px;
    height: 5px;
    background: #eb655c;
}

/* 地址选择器样式 */
.address-select-wrap { position: relative; }
.address-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    background: #fff;
    font-size: 14px;
}
.address-current:hover { border-color: var(--brand-red); }
.arrow-down {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #999;
    margin-left: 8px;
}
.address-popup {
    position: absolute;
    top: 36px; left: 0;
    width: 400px;
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 10px;
}
.address-tabs { display: flex; border-bottom: 1px solid #f0f0f0; margin-bottom: 10px; }
.address-tab { padding: 5px 15px; cursor: pointer; font-size: 13px; color: #333; }
.address-tab.active { color: var(--brand-red); border-bottom: 2px solid var(--brand-red); font-weight: bold; }
.address-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 250px; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
.address-list li { padding: 4px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.address-list li:hover { background: #f5f5f5; color: var(--brand-red); }
.address-list li.selected { background: var(--brand-red); color: #fff; }

/* 右侧导航 */
.right-nav-fixed {
    position: fixed;
    right: 0;
    top: 30%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 100;
}
.right-nav-item {
    width: 60px;
    height: 60px;
    padding: 10px 10px;
    background: #F8F8F8;
    color: #333;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.right-nav-item:hover { background: #9a0000; color: #fff;}

.footer-tabbar p {
    text-align: center;
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
    color: #393939;
}
.footer-tabbar a {
    color: inherit;
    text-decoration: none;
}
.footer-tabbar a:hover {
    color: var(--brand-red);
}

/* 微信分享二维码弹出层 (一模一样复刻) */
.qr-code-container {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 20px;
    display: none;
    text-align: center;
    z-index: 1000;
}
.qr-trigger:hover .qr-code-container {
    display: block;
}
/* 小三角 */
.qr-code-container::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    transform: rotate(45deg);
}
.qr-code-title { font-size: 16px; color: #333; margin-bottom: 15px; font-weight: 500; }
.qr-code-image { width: 150px; height: 150px; margin: 0 auto; display: block; }
.qr-code-tip { font-size: 13px; color: #999; margin-top: 15px; }

/* 商品详情内部样式 */
.details-body-html img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
}
.details-body-html p {
    margin-bottom: 1em;
    line-height: 1.8;
}
.details-body-html table {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 1em;
}
.details-body-html td, .details-body-html th {
    border: 1px solid #ddd;
    padding: 8px;
}
.details-body-html strong, .details-body-html b {
    font-weight: bold;
}
.details-body-html a {
    color: var(--brand-red);
    text-decoration: underline;
}
.details-body-html video {
    max-width: 100% !important;
}

/* 新增组件样式 */
.hot-section-title {
    width: 270px !important; /* 强制等于父容器宽度 */
    margin-left: -10px !important; /* 抵消父容器 padding-left */
    margin-top: -10px !important; /* 抵消父容器 padding-top */
    height: 50px !important;
    background: url(https://www.e1988.com/assets/%E8%83%8C%E6%99%AF-twxeOAHE.jpg) no-repeat !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    padding: 0 20px !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    border-left: none !important;
    margin-bottom: 15px !important;
}
.hot-list { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.hot-item { 
    width: 250px; 
    height: 326px; 
    border: 1px solid #eee; 
    padding: 10px; 
    background: #fff; 
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.hot-item:hover { border-color: var(--brand-red); }
.hot-item img { 
    width: 100%; 
    height: 200px; 
    object-fit: contain; 
    margin-bottom: 10px;
}
.hot-title {
    font-size: 14px;
    color: #333;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}
.hot-price { color: var(--brand-red); font-weight: bold; font-size: 16px; margin-bottom: 5px; }
.hot-time { font-size: 12px; color: #999; }

.footer-cate-item { display: flex; align-items: center; gap: 15px; }
.footer-icon { 
    width: 50px; 
    height: 60px; 
    background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAYAAAAkNenBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM1OUUxNDg3QTE5MTFFRUIyNkM4ODkxOTM1MkY4Q0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM1OUUxNDk3QTE5MTFFRUIyNkM4ODkxOTM1MkY4Q0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzU5RTE0NjdBMTkxMUVFQjI2Qzg4OTE5MzUyRjhDQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzU5RTE0NzdBMTkxMUVFQjI2Qzg4OTE5MzUyRjhDQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po/KxNQAAAStSURBVHja7Jp/TFVlGMe/hx9KQinOIJjDKJyThYiWgLbWYs1a+Yf2h/yjuSRNE62rWTevyhXQG02JSliNsKyhjinayjbbtKn8Ss0xlKJgzCKuOpfZuEpC9/Y8x8Pdy9vFuHLP5cjOs333nvu+95zzfs553/c85zyP4vF4MBIsBCPEwvQ8eNnDMUlUfKD9zF3RdrlVr3MpegwtAhhHhY07TxqlVd/UoAoI6E9DgxAAD9UlpELSAwP87SJpA+lTAnIbDoQgMqnYSUoT6+NnUbWioLOhVt7lLGklwdQbAoQAEqhwkLL5eH31UfETkbHehsnPz1d///JVNeqLCtDV2SHuziffS1pPQB3DAkIA91BhIb3F/fauHhERSM15FTNWrFG3Revt7sYPZSVoLN+pbgvWpV2MHQR0I2ggBLGAimJSglifRFc/882N6t24nfFdqXXY0fb1IbnpAul1gqnWFYQApmsAT4r1E5JTMMe2BfHpc/w6eWdDDWoKNuFKc5Pc9B1pNQE1BRSEACZQYSctE589EdHjkb7WiqkLF0EJubNnq8ftRvOe3fi+2IHuq3/0G4mkj0mbCejKkEAIgDv9CimfNM7rDoSGIWLJy5i5yoLR940NyKr391/XcLrkXZz7vALuf3rFJqbbyFAE1Os3CEHM5clHShbrE554CrM32BGdNEWXJ/TV1hbUFm7Gr8ePyk3NpFUEc2xQIJpbUUSaL9aPnZRIAFvwYNbcoPhO7d9+g7ptebh2oV1uqtaW61afIAQQpT1xLYJbgfAxkXhszRtIeTEHIeGjguoIuntuorHiI5z5cAd6rrvEphvaaHEQUJcKUvrQ/YrgVsR5CWnyTnkhG+kWK8bExA6rZ3v98iU0bN+Kn/bTs7P/CHKS1pH2MEgdbWSIrbFpM/H4pq2ImZZmKFf90tkzqCm0qaVk9QziReQrP/tt+y23QlGM+eJBd6TlYBW5O/nqnfKOIBEkp6ldnRN3g/GcKU9J9P2GeLdA+OrriHnVNUFMEBPEBDFBTBATxAQxQUwQE8QEMUFMEBPEBDFB/AaRPhQb2uS+9gOpzMpAy4F98odiYxn17efqKrWvooU+Fx35DJVq9LLH5VLjEr+dOIbxk6ciKi7eUAz88fpI7lI07S5X+ypYPYNU0AYHTTjgfy/Xui468WNVJbp+70Bs6gyER0YNKwB/rD6Zb8MJuxUuZ6fYxGGFlaTX5EAPx8zXkrwBcv7GyrHC1JeWGynQw0H67RADPf6E3jKteUh8+tmgQLQfOYw6h93/0JtsBJRFxfswVjCUU6WO+tpvMOFpjq0XkKK9S11oGB5ZvBSPrl4X0PD0qfeKcP6LXYENT0tAAyYMzLJYkZw9tISB85WfEcQ7+iUM+ACaRkUJgpPCwcPo3GCPdadJNbwQcE7KJLHer6SabXloO/zlf+Y4r5q6J9VIMAOmOU1flou05bm+05xKi9H4SZkx0pwkoInacu078WzeAtWt+J/EM74LzqH0I5CpgOz8lEJOBaR546FVyHm6Qd7lFG6lMhkjFVCC6UvO5OU6boC/8ZXnDFRjJmdKQLdLl83rcysCaYqeKeVCAnMPLwx6JjD/K8AAiasjzUiqEvYAAAAASUVORK5CYII=') no-repeat; 
    background-size: 100% 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px; 
    font-weight: bold; 
    color: #9a0000;
    padding-bottom: 5px; /* 文字稍微往上提一点，对齐六边形中心 */
}
.footer-text h5 { font-size: 18px; font-weight: bold; color: #333; margin: 0 0 4px 0; }
.footer-text span { font-size: 12px; color: #999; display: block; }

.footer-nav-group { 
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px; 
}
.footer-nav-group h5 { font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #393939; margin-top: 0; }
.footer-nav-group a { 
    display: block; 
    font-size: 14px; 
    color: #828282; 
    text-decoration: none;
    line-height: 1.4;
}
.footer-nav-group a:hover { color: var(--brand-red); }

/* 富文本渲染补丁 (v-html 效果对齐) */
.details-body-html {
    line-height: 1.8;
    color: #333;
    font-size: 16px;
    overflow-x: hidden;
    padding: 20px 0;
}
.details-body-html img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
}
.details-body-html p {
    margin-bottom: 1em;
    word-break: break-all;
}
.details-body-html table {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 1em;
}
.details-body-html td, .details-body-html th {
    border: 1px solid #ddd;
    padding: 8px;
}
.details-body-html strong, .details-body-html b {
    font-weight: bold;
}
.details-body-html a {
    color: var(--brand-red);
    text-decoration: underline;
}
.details-body-html video {
    max-width: 100% !important;
}