/* ==========================================
   Reuse.mx 风格自定义CSS - 精确版本
   只针对装修模块，不影响Header和Footer
   ========================================== */

/* 1. 全局变量 - Reuse.mx品牌色 */
:root {
  --reuse-primary: #2ECC71;
  --reuse-primary-dark: #27AE60;
  --reuse-bg-dark: #1A1A1A;
  --reuse-bg-black: #0D0D0D;
  --reuse-text-white: #FFFFFF;
  --reuse-text-gray: #9E9E9E;
  --reuse-card-bg: #1E1E1E;
  --reuse-border: #2C2C2C;
}

/* 2. 只针对装修模块的背景 - 不改变body */
.decorate-module,
.page-module,
.module-container,
[class*="module"],
[decorate-module] {
  background: transparent !important;
}

/* 3. 产品卡片 - 深色主题 */
.goods-item,
.product-item,
.product-card,
[class*="goods-item"],
[class*="product-item"] {
  background: var(--reuse-card-bg) !important;
  border-radius: 12px !important;
  border: 1px solid var(--reuse-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.goods-item:hover,
.product-item:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(46,204,113,0.2) !important;
  border-color: var(--reuse-primary) !important;
}

/* 4. 产品标题 - 白色文字 */
.goods-name,
.product-name,
.goods-title,
[class*="goods-name"],
[class*="product-name"] {
  color: var(--reuse-text-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* 5. 价格样式 - 绿色 */
.goods-price,
.product-price,
.sale-price,
[class*="price"] {
  color: var(--reuse-primary) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.original-price,
.market-price,
[class*="original-price"] {
  color: var(--reuse-text-gray) !important;
  text-decoration: line-through !important;
  font-size: 14px !important;
}

/* 6. 按钮样式 - 绿色渐变 */
.btn-primary,
.el-button--primary,
button.primary,
[class*="btn-primary"] {
  background: linear-gradient(135deg, var(--reuse-primary) 0%, var(--reuse-primary-dark) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.el-button--primary:hover {
  background: linear-gradient(135deg, var(--reuse-primary-dark) 0%, #229954 100%) !important;
  transform: translateY(-2px) !important;
}

/* 7. Banner区域 */
.banner-section,
.pc-banner,
[class*="banner"] {
  border-radius: 0 !important;
}

/* 8. 模块标题 */
.module-title,
.section-title,
[class*="module-title"] {
  color: var(--reuse-text-white) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* 9. Newsletter订阅区 - 深色背景 */
.newsletter-section,
.subscribe-section,
[class*="newsletter"],
[class*="subscribe"] {
  background: linear-gradient(135deg, var(--reuse-bg-black) 0%, var(--reuse-bg-dark) 100%) !important;
  padding: 60px 20px !important;
}

.newsletter-title,
.subscribe-title {
  color: var(--reuse-text-white) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}

.newsletter-desc,
.subscribe-desc {
  color: var(--reuse-text-gray) !important;
}

/* 10. 四大卖点区域 */
.benefits-section,
.features-section,
[class*="benefits"],
[class*="features"] {
  background: var(--reuse-bg-dark) !important;
  padding: 40px 20px !important;
}

.benefit-item,
.feature-item {
  background: var(--reuse-card-bg) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  text-align: center !important;
  border: 1px solid var(--reuse-border) !important;
}

.benefit-item:hover,
.feature-item:hover {
  border-color: var(--reuse-primary) !important;
}

/* 11. 品类导航 */
.category-item,
[class*="category-item"] {
  background: var(--reuse-card-bg) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.category-item:hover {
  border-color: var(--reuse-primary) !important;
  transform: translateY(-4px) !important;
}

.category-name {
  color: var(--reuse-text-white) !important;
  font-weight: 600 !important;
}

/* 12. 滚动条样式 */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--reuse-bg-dark) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--reuse-primary) !important;
  border-radius: 4px !important;
}

/* 13. 页面中间内容区 - 深色背景（不影响Header/Footer） */
.main-content,
.page-content,
.content-wrapper,
#app > div:not(header):not(footer),
.nuxt-app > div:not(header):not(footer) {
  background: var(--reuse-bg-black) !important;
}

/* 14. 成色标签样式 */
.condition-tag,
[class*="condition"] {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.condition-refurbished,
[data-condition="Reacondicionado"] {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

.condition-open-box,
[data-condition="Open Box"] {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

/* 15. 折扣标签 */
.discount-badge,
.sale-tag,
.promotion-tag {
  background: #E74C3C !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
}