/* ============================================
   meiweilaojia.com — 极简纯黑配色 Custom CSS
   引入位置: app.blade.php </head> 前
   <link rel="stylesheet" href="/custom.css">
   ============================================ */

/* ── 1. 引入 Roboto 字体（国内镜像）── */
@import url('https://fonts.loli.net/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ── 2. 全局变量 ── */
:root {
  --c-primary:     #E53935;
  --c-primary-dk:  #C62828;
  --c-primary-bg:  #FFEBEE;
  --c-nav:         #111111;
  --c-page-bg:     #FAFAFA;
}

/* ── 3. 全站字体 ── */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, label,
button, input, select, textarea {
  font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ── 4. 页面底色 ── */
body {
  background-color: var(--c-page-bg) !important;
}

/* ── 5. 导航栏：纯黑 ── */
header,
.header,
#header,
nav.navbar,
.top-header,
.navbar {
  background-color: var(--c-nav) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 导航链接 */
header a,
.header a,
#header a,
nav.navbar a,
.navbar a,
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
header a:hover,
.header a:hover,
nav.navbar a:hover,
.navbar-nav .nav-link:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 顶部小字（电话 / News）*/
.top-bar,
.header-top,
.top-info {
  background-color: #000 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
}
.top-bar a,
.header-top a,
.top-info a {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── 6. Logo ── */
.logo img,
.navbar-brand img {
  filter: brightness(1.1);
}

/* ── 7. 搜索框 ── */
.search-input,
.form-control.search,
input[type="search"],
.search-box input {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 13px !important;
}
.search-input::placeholder { color: rgba(255,255,255,0.4) !important; }

/* ── 8. 面包屑 ── */
.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"] {
  background-color: #F8F8F8 !important;
  border-bottom: 0.5px solid #EFEFEF !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  margin-bottom: 0 !important;
}
.breadcrumb-item a,
.breadcrumbs a {
  color: #999 !important;
}
.breadcrumb-item.active,
.breadcrumb-item:last-child {
  color: #444 !important;
  font-weight: 500 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #ccc !important;
}

/* ── 9. 分类徽章 ── */
.product-category a,
.product-category,
.category-badge,
.badge-category,
.detail-category a {
  background-color: var(--c-primary-bg) !important;
  color: #B71C1C !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* ── 10. 产品标题 ── */
.product-name,
.product-title,
.detail-name,
.detail-title,
h1.title,
.product-detail h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.4 !important;
}

/* ── 11. 价格 ── */
.price,
.product-price,
.price-current,
.detail-price,
.price-box .price,
.product-detail .price,
span.price {
  color: var(--c-primary) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
}

/* ── 12. 库存状态 ── */
.in-stock,
.stock-status,
.availability,
.product-stock {
  background-color: #E8F5E9 !important;
  color: #2E7D32 !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

/* ── 13. 数量加减控件 ── */
.quantity-input,
.qty-group,
.input-group.qty {
  border: 0.5px solid #DDD !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.qty-minus,
.qty-plus,
.btn-qty {
  background-color: #F8F8F8 !important;
  color: #555 !important;
  border: none !important;
}

/* ── 14. 主按钮：Add to Cart ── */
.btn-cart,
.btn-add-cart,
.add-to-cart,
.btn-primary,
button.btn-cart,
.detail-buttons .btn-primary {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s ease !important;
}
.btn-cart:hover,
.btn-add-cart:hover,
.add-to-cart:hover,
.btn-primary:hover,
.detail-buttons .btn-primary:hover {
  background-color: var(--c-primary-dk) !important;
  border-color: var(--c-primary-dk) !important;
  color: #fff !important;
}

/* ── 15. 次按钮：Buy Now ── */
.btn-buy,
.buy-now,
.btn-secondary,
.btn-outline-primary,
.detail-buttons .btn-secondary {
  background-color: transparent !important;
  border: 1.5px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 11px 28px !important;
  transition: background-color 0.2s ease !important;
}
.btn-buy:hover,
.buy-now:hover,
.btn-outline-primary:hover {
  background-color: var(--c-primary-bg) !important;
  color: var(--c-primary) !important;
}

/* ── 16. 心愿单按钮 ── */
.btn-wishlist,
.add-to-wishlist,
.wishlist-btn,
.btn-favorite {
  color: #BBBBBB !important;
  font-size: 13px !important;
  background: transparent !important;
  border: none !important;
}
.btn-wishlist:hover,
.wishlist-btn:hover,
.btn-favorite:hover {
  color: var(--c-primary) !important;
}

/* ── 17. 产品选项卡（Description / Review / Related）── */
.product-tabs .nav-link,
.detail-tabs .nav-link,
.nav-tabs .nav-link {
  color: #888 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.product-tabs .nav-link.active,
.detail-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary) !important;
  background: transparent !important;
}

/* ── 18. 产品卡片（列表页）── */
.product-card,
.product-item,
.product-list-item {
  border-radius: 10px !important;
  border: 0.5px solid #EFEFEF !important;
  transition: box-shadow 0.2s ease;
  background: #fff !important;
}
.product-card:hover,
.product-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
/* 产品卡片价格 */
.product-card .price,
.product-item .price {
  font-size: 18px !important;
  color: var(--c-primary) !important;
  font-weight: 700 !important;
}
/* 产品卡片标题 */
.product-card .product-name,
.product-item .product-name,
.product-card h3,
.product-item h3 {
  font-size: 14px !important;
  color: #222 !important;
  font-weight: 500 !important;
}

/* ── 19. 信任图标栏（手动添加 .trust-bar HTML 后生效）── */
.trust-bar {
  display: flex !important;
  border: 0.5px solid #EFEFEF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 16px 0 !important;
}
.trust-bar-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 4px !important;
  border-right: 0.5px solid #EFEFEF !important;
  background: #FAFAFA !important;
  font-size: 11px !important;
  color: #666 !important;
  text-align: center !important;
  gap: 4px !important;
}
.trust-bar-item:last-child {
  border-right: none !important;
}
.trust-bar-item i,
.trust-bar-item svg {
  color: var(--c-primary) !important;
  font-size: 18px !important;
}

/* ── 20. 页脚 ── */
footer,
.footer,
#footer {
  background-color: #111111 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-top: none !important;
}
footer a,
.footer a,
#footer a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
}
footer a:hover,
.footer a:hover,
#footer a:hover {
  color: #ffffff !important;
}
footer h5,
footer h6,
.footer h5,
.footer h6 {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.footer-bottom,
.copyright {
  border-top: 0.5px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 12px !important;
}

/* ── 21. 分页器 ── */
.pagination .page-link {
  color: var(--c-primary) !important;
  border-color: #EEE !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}

/* ── 22. 表单 focus 高亮 ── */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12) !important;
  outline: none !important;
}

/* ── 23. 链接通用颜色 ── */
a:not([class]),
.text-primary {
  color: var(--c-primary) !important;
}
a:not([class]):hover {
  color: var(--c-primary-dk) !important;
}