/**
 * 自定义样式 - 侧边栏和商家入驻Banner
 */

/* 全局链接样式 - 移除默认下划线和颜色 */
a {
    text-decoration: none;
    color: inherit;
}

/* 导航链接样式 */
.header-nav ul li a {
    text-decoration: none;
    color: #333;
}

.header-nav ul li a:hover {
    color: var(--color-main);
}

.header-nav ul li.active a {
    color: var(--color-main);
}

/* 主题色变量 */
:root {
    --color-main: #F89900;
}

/* 侧边栏导航样式 - 匹配原网站 */
.th_back {
    position: fixed;
    left: calc((100vw - 1200px) / 2 - 60px);
    top: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2000;
}

.th_back span {
    font-size: 12px;
    width: 44px;
    height: 40px;
    color: #ffffff;
    background-color: #d8d8d8;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
}

.th_back span:nth-child(5) {
    justify-content: center;
    background-color: var(--color-main);
}

.th_back span img {
    width: 28px;
    height: 28px;
    margin-left: 8px;
    margin-right: 8px;
    object-fit: contain;
}

.th_back span div {
    padding: 0 5px;
    display: none;
}

.th_back .nav-bar {
    transition: all 0.5s ease;
}

.th_back .nav-bar:hover {
    width: 150px;
    background-color: var(--color-main);
}

.th_back .nav-bar:hover div {
    display: flex !important;
    justify-content: center;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    color: #ffffff;
    animation: textAmin 1s ease;
}

.th_back .active {
    background-color: var(--color-main);
}

@keyframes textAmin {
    0% {
        color: transparent;
    }

    100% {
        color: #fff;
    }
}

/* 商家入驻Banner样式 - 匹配原网站 */
.banner-content {
    width: 1200px;
    margin: 0 auto;
    height: 352px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
}

.banner-content>.content {
    width: 650px;
    height: 352px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-content>.content>p {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.banner-content>.content>h3 {
    font-size: 60px;
    font-weight: 600;
    color: var(--color-main);
    margin: 10px 0 20px;
}

.banner-content>.content>div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: var(--color-main);
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.banner-content>.content>div:hover {
    opacity: 0.9;
}

/* 回到顶部按钮 */
.th-back-top {
    position: fixed;
    right: 15px;
    bottom: 104px;
    height: 39px;
    width: 80px;
    z-index: 9;
    opacity: 0.8;
    text-align: right;
}

/* 用户登录状态样式 */
.header-user .user-name {
    color: #333;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.header-user .user-name:hover {
    color: var(--color-main);
}

/* 底部下载区域样式 - 匹配原网站 */
.download-content {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 60px;
    height: 297px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.download-content>div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.download-content>div.download {
    width: 730px;
    font-weight: bold;
    margin-left: 10px;
}

.download-content>div.download>h3 {
    font-size: 40px;
    letter-spacing: 2px;
    margin-left: 5px;
}

.download-content>div.download>.tips {
    height: 35px;
    line-height: 35px;
    display: flex;
    font-size: 24px;
    margin-top: 10px;
}

.download-content>div.download>.tips>.item {
    padding: 0 8px;
}

/* ============================================
   首页 Loading 样式
   ============================================ */

/* Loading 遮罩层 */
.page-loading {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 100px 0;
}

/* Loading 动画圆圈 */
.page-loading .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-main);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading 文字 */
.page-loading .loading-text {
    margin-top: 16px;
    color: #999;
    font-size: 14px;
}

/* 内容区域初始隐藏 */
.home-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 内容区域显示 */
.home-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* Loading 隐藏 */
.page-loading.hidden {
    display: none;
}

/* 详情页内容区域初始隐藏 */
.detail-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 详情页内容区域显示 */
.detail-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   商品详情页图片轮播样式
   ============================================ */

/* 缩略图容器 */
.gallery-thumbs {
    margin-top: 10px;
    padding: 5px 0;
}

.gallery-thumbs .swiper-slide {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 缩略图高亮状态 */
.gallery-thumbs .swiper-slide.slide-thumb-active {
    border-color: var(--color-main);
}

.gallery-thumbs .swiper-slide:hover {
    border-color: var(--color-main);
}

/* 主图容器 */
.gallery-top .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-top .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================
   分类页面样式
   ============================================ */

/* 分类页内容区域初始隐藏 */
.category-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 分类页内容区域显示 */
.category-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* 子分类标签样式 */
.classification-item-text div span {
    cursor: pointer;
    transition: color 0.2s ease;
}

.classification-item-text div span:hover {
    color: var(--color-main);
}

/* 分类图片悬停效果 */
.cla-img {
    overflow: hidden;
}

.cla-img img {
    transition: transform 0.3s ease;
}

.cla-img:hover img {
    transform: scale(1.05);
}

/* 分类标题悬停效果 */
.classification-item-text h2 {
    transition: color 0.2s ease;
}

.classification-item-text h2:hover {
    color: var(--color-main);
}

/* ============================================
   收藏按钮样式修复
   ============================================ */

/* 商品收藏按钮 - 确保收藏和未收藏状态样式一致 */
.product-info-right-info-tool-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.product-info-right-info-tool-item i {
    font-size: 18px;
    margin-right: 5px;
}

.product-info-right-info-tool-item span {
    font-size: 14px;
    color: #666;
}

/* 未收藏状态 */
.product-info-right-info-tool-item .el-icon-star-off {
    color: #999;
    font-size: 18px;
}

/* 已收藏状态 */
.product-info-right-info-tool-item .el-icon-star-on {
    color: var(--color-main);
    font-size: 18px;
}

/* 店铺区域样式修复 */
.product-details-merchant-statistics {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.product-details-merchant-statistics .merchant-statistics {
    flex: 1;
    text-align: center;
}

.product-details-merchant-statistics .merchant-statistics h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.product-details-merchant-statistics .merchant-statistics span {
    font-size: 12px;
    color: #999;
}

/* ============================================
   商品列表页样式
   ============================================ */

/* Loading 样式 */
.product-list-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

.product-list-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--color-main);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 商品列表包装器 */
.product-list-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-list-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* 分类筛选栏整体样式 */
.commodity-filter {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    position: sticky;
    top: 80px;
    padding-right: 10px;
}

.commodity-filter h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.commodity-filter::-webkit-scrollbar {
    width: 4px;
}

.commodity-filter::-webkit-scrollbar-track {
    background: transparent;
}

.commodity-filter::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.commodity-filter::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* 分类列表 */
#categoryFilterList {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 分类项基础样式 - 无背景 */
.commodity-filter-item {
    padding: 0;
    margin: 0;
    background: transparent !important;
}

/* 全部商品 */
.commodity-filter-item.first-item {
    padding: 8px 0;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border: none;
}

.commodity-filter-item.first-item:hover {
    color: var(--color-main);
}

.commodity-filter-item.first-item.commodity-filter-item-active {
    color: var(--color-main);
    font-weight: 500;
}

/* 一级分类标题 */
.commodity-filter-item>.list.category-title {
    padding: 8px 0;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: transparent;
}

.commodity-filter-item>.list.category-title:hover {
    color: var(--color-main);
}

/* 展开状态 - 只改变颜色，不加背景 */
.commodity-filter-item.commodity-filter-item-expanded {
    background: transparent !important;
}

.commodity-filter-item.commodity-filter-item-expanded>.list.category-title {
    color: var(--color-main);
}

/* 激活状态 */
.commodity-filter-item.commodity-filter-item-active>.list.category-title {
    color: var(--color-main);
    font-weight: 500;
}

/* 箭头图标 */
.category-title i {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.commodity-filter-item-expanded .category-title i {
    color: var(--color-main);
}

/* 子分类列表 */
.sub-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 子分类项 */
.sub-category-item {
    padding: 5px 0;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1.5;
    text-indent: 10px;
}

.sub-category-item:hover {
    color: var(--color-main);
}

.sub-category-item.sub-active {
    color: var(--color-main);
    font-weight: 500;
}

/* 分类名称 */
.category-title .category-name {
    flex: 1;
}

/* 展开箭头 > 符号 */
.category-title .expand-arrow {
    font-size: 12px;
    color: #999;
    font-weight: normal;
    margin-left: 5px;
}

.commodity-filter-item-expanded .category-title .expand-arrow,
.commodity-filter-item-expanded .category-title .el-icon-arrow-down {
    color: var(--color-main);
}

/* ============================================
   商品收藏按钮样式
   ============================================ */

/* 收藏按钮容器 */
.wish-action {
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.wish-action:hover {
    background-color: rgba(248, 153, 0, 0.1);
}

/* 收藏图标 */
.wish-action i {
    font-size: 18px;
    transition: all 0.2s ease;
}

.wish-action:hover i {
    transform: scale(1.1);
}

/* 已收藏状态 */
.wish-action i.el-icon-star-on {
    color: var(--color-main);
}

/* 未收藏状态 */
.wish-action i.el-icon-star-off {
    color: #ccc;
}

.wish-action:hover i.el-icon-star-off {
    color: var(--color-main);
}

/* 点击动画 */
@keyframes wishPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.wish-action.animating i {
    animation: wishPulse 0.3s ease;
}

/* 商品主区域可点击 */
.product-main {
    cursor: pointer;
}

/* 空状态样式 */
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #999;
    width: 100%;
}

.empty-state i,
.error-state i {
    font-size: 60px;
    margin-bottom: 15px;
    color: #ddd;
}

.empty-state p,
.error-state p {
    font-size: 14px;
}

/* 排序选项激活状态 */
.sort-option.checked,
.sort-option.active,
.commodity-content-title h2.active,
.commodity-content-title h2.sort-active {
    color: var(--color-main);
}

.sort-icon i.sort-active {
    color: var(--color-main);
}

/* 排序区域整体样式 */
.commodity-content-title li {
    cursor: pointer;
}

.commodity-content-title li:hover .sort-option {
    color: var(--color-main);
}

/* "综合"排序按钮样式 */
.commodity-content-title>h2 {
    cursor: pointer;
    transition: color 0.2s ease;
}

.commodity-content-title>h2:hover {
    color: var(--color-main);
}

/* ============================================
   店铺详情页 Loading 样式
   ============================================ */

/* 店铺页全屏 Loading */
.shop-page-loading {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 100px 0;
}

.shop-page-loading.hidden {
    display: none;
}

/* 店铺内容区域初始隐藏 */
.shop-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 店铺内容区域显示 */
.shop-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* 特价商品页面内容区域 */
.discounted-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.discounted-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* 分页样式补充 */
.common-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.el-pager .number {
    cursor: pointer;
}

.el-pager .number:hover {
    color: var(--color-main);
}

.btn-prev:not([disabled]),
.btn-next:not([disabled]) {
    cursor: pointer;
}

.btn-prev:not([disabled]):hover,
.btn-next:not([disabled]):hover {
    color: var(--color-main);
}

/* 分页分组按钮样式 */
.page-group-btn {
    cursor: pointer;
    padding: 0 8px;
    min-width: 32px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    background-color: #f4f4f5;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.page-group-btn:hover {
    color: #fff;
    background-color: var(--color-main);
}

.page-group-btn.prev-group {
    margin-right: 5px;
}

.page-group-btn.next-group {
    margin-left: 5px;
}

/* 搜索页面内容区域 */
.search-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}

/* 店铺搜索页面内容区域 */
.shop-search-content-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.shop-search-content-wrapper.loaded {
    opacity: 1;
    visibility: visible;
}



/* 购物车浮动按钮样式 - 确保所有页面一致 */
.shop-cart-float {
    width: 108px;
    height: 76px;
    background-color: var(--color-main);
    border-radius: 40px 0px 0px 40px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 15px;
    cursor: pointer;
    z-index: 999;
}

.shop-cart-float-count {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 10px;
}

.shop-cart-float .el-button {
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
}

.shop-cart-float .el-button:hover {
    background: transparent;
    color: #ffffff;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-cart-float .el-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 67px;
    height: 23px;
    color: var(--color-main);
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    padding: 0;
}