/* ============================================================
   发卡网前端 - 黑金主题 (Dark & Gold)
   品牌金: #d4af37 / #f0c75e   底色: #0d0d0f
   ============================================================ */
:root{
  --brand:#d4af37; --brand-2:#f0c75e; --brand-deep:#b8902a;
  --brand-soft:rgba(212,175,55,.12);
  --ink:#f3f4f6; --muted:#9ca3af; --line:#2b2b31;
  --bg:#0d0d0f; --card:#16161b; --card-2:#1d1d24;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(212,175,55,.12);
  --gold-grad:linear-gradient(135deg,#d4af37,#f0c75e);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}
a{color:var(--brand);transition:color .15s}
a:hover{color:var(--brand-2);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4,h5{color:var(--ink);font-weight:700}

/* ---------- 顶部导航 ---------- */
.navbar-white{background:rgba(13,13,15,.9);backdrop-filter:blur(12px);border:none;border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.navbar-fixed-top{position:sticky;top:0;z-index:1000}
.navbar-white .navbar-brand{display:flex;align-items:center;height:64px;padding:0 15px!important}
.navbar-white .navbar-brand img{height:38px!important;width:auto}
.navbar-white .navbar-nav>li>a{color:#e5e7eb;font-weight:500;padding:22px 14px;font-size:14px}
.navbar-white .navbar-nav>li>a:hover,.navbar-white .navbar-nav>li.open>a{color:var(--brand);background:transparent}
.navbar-white .navbar-nav>.active>a{color:var(--brand)}
.navbar-white .dropdown-menu{background:var(--card-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px}
.navbar-white .dropdown-menu>li>a{color:#e5e7eb;border-radius:8px;padding:9px 14px}
.navbar-white .dropdown-menu>li>a:hover{background:var(--brand-soft);color:var(--brand)}
.navbar-white .avatar-img img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.navbar-toggle .icon-bar{background:var(--brand)}

/* ---------- 内容容器 ---------- */
.content.container{min-height:calc(100vh - 220px);padding-top:24px;padding-bottom:40px}

/* ---------- 面包屑 ---------- */
.breadcrumbs{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 18px;margin-bottom:18px}
.breadcrumb{background:transparent;margin:0;padding:0}
.breadcrumb-item a{color:var(--muted)}
.breadcrumb-item.active{color:var(--ink)}

/* ---------- 分类按钮 ---------- */
.category-container{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:20px}
.category-btn{background:transparent!important;border:1.5px solid var(--line)!important;color:#e5e7eb!important;border-radius:999px!important;font-weight:500;padding:9px 22px!important;margin:0 10px 10px 0!important;box-shadow:none!important;transition:all .15s}
.category-btn:hover{border-color:var(--brand)!important;color:var(--brand)!important}
.category-btn.active{background:var(--gold-grad)!important;border-color:transparent!important;color:#0d0d0f!important;font-weight:700;box-shadow:0 6px 20px rgba(212,175,55,.3)!important}

/* ---------- 面板 / 商品卡片 ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.panel-default>.panel-heading{background:transparent;border:none;padding:18px 20px 6px;font-size:16px;font-weight:700;color:var(--ink)}
.panel-body{padding:15px 20px}
.shadow{box-shadow:var(--shadow)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}
.tb-recommend-content-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s;margin-bottom:16px;padding:0}
.tb-recommend-content-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(212,175,55,.35)}
.tb-recommend-content-item .item-link{display:block;color:inherit}
.tb-recommend-content-item .img-wrapper{position:relative;width:100%;overflow:hidden;background:#101014}
.tb-recommend-content-item .img-wrapper img{width:100%;height:auto;object-fit:cover;transition:transform .3s}
.tb-recommend-content-item:hover .img-wrapper img{transform:scale(1.04)}
.tb-recommend-content-item .info-wrapper{padding:14px 16px}
.tb-recommend-content-item .info-wrapper .title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px;display:block}
.tb-recommend-content-item .info-wrapper .title img{height:14px;margin-left:4px}
.goods-tag{font-size:12px;border-radius:999px;padding:2px 9px;margin:0 6px 6px 0;display:inline-block;border:1px solid var(--line);background:var(--card-2);color:var(--muted)}
.goods-tag.text-success{color:#34d399;background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.3)}
.goods-tag.text-info{color:var(--brand);background:var(--brand-soft);border-color:rgba(212,175,55,.35)}
.goods-tag.text-danger{color:#f87171;background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}
.goods-tag.text-warning{color:#fbbf24;background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3)}
.price-value,.reg-price{color:var(--brand);font-weight:700}
.sale-price{color:var(--muted);text-decoration:line-through}

/* ---------- 商品网格(首页) ---------- */
.products-grid-row,.products-grid{display:flex;flex-wrap:wrap;margin:-8px}
.product-grid-item,.grid-item{flex:0 0 100%}
@media(min-width:576px){.product-grid-item,.grid-item{flex:0 0 50%;max-width:50%}}
@media(min-width:992px){.product-grid-item,.grid-item{flex:0 0 33.333%;max-width:33.333%}}
@media(min-width:1200px){.product-grid-item,.grid-item{flex:0 0 25%;max-width:25%}}
.product-grid-item{padding:8px}
.product{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s;height:100%;display:flex;flex-direction:column}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(212,175,55,.35)}
.product__image{overflow:hidden;background:#101014}
.product__image img{width:100%;height:auto;display:block}
.product__description{padding:14px 16px;flex:1}
.product_name{font-weight:600;color:var(--ink)}

/* ---------- 商品详情页 ---------- */
.goods-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.goods-page-cover{max-height:420px;overflow:hidden;border-radius:12px;background:#101014}
.goods-page-cover img{width:100%;object-fit:cover}
.prod-details__body{padding:0}
.prod-details__prod-name{font-size:22px;font-weight:700;margin-bottom:12px;color:var(--ink)}
.prod-details__specifications,.prod-offering__delivinfo{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.specifications__item,.delivinfo__item{display:flex;padding:6px 0;border-bottom:1px dashed var(--line)}
.specifications__item:last-child,.delivinfo__item:last-child{border-bottom:none}
.specifications__item .name,.delivinfo__item .name{width:90px;color:var(--muted)}
.select-specs{margin-bottom:14px}
.variations__title{font-weight:600;margin-bottom:8px;color:var(--ink)}
.variations__list{display:flex;flex-wrap:wrap;gap:8px}
.variations__list button{border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;background:transparent;color:#e5e7eb;cursor:pointer}
.variations__list button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
.prod-offering{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.prod-offering__prices{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.prod-offering__prices .price-value{font-size:28px}
.prod-offering__rating{margin-bottom:14px;color:var(--brand)}
.prod-offering__cart-btn .btn{width:100%;font-size:16px;padding:13px;border-radius:12px;font-weight:600}
.prod-offering__benefits .text{color:var(--muted)}

/* ---------- 按钮 ---------- */
.btn{border-radius:10px;font-weight:500;border:none;transition:all .15s}
.btn-primary{background:var(--gold-grad);color:#0d0d0f;font-weight:700;box-shadow:0 4px 14px rgba(212,175,55,.25)}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#f0c75e,#d4af37);color:#0d0d0f;transform:translateY(-1px);box-shadow:0 8px 22px rgba(212,175,55,.35)}
.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-info{background:linear-gradient(135deg,#0891b2,#06b6d4);color:#fff}
.btn-danger{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff}
.btn-block{display:block;width:100%}
.btn-lg{padding:12px 24px;font-size:15px}

/* ---------- 表单 ---------- */
.form-control{height:44px;background:var(--card-2);border:1.5px solid var(--line);border-radius:10px;box-shadow:none;color:var(--ink)}
.form-control:focus{border-color:var(--brand);background:var(--card-2);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.form-group label{color:var(--ink);font-weight:500}
.form-hint{color:var(--muted);font-size:12px}
.input-group-addon{background:var(--card-2);border:1.5px solid var(--line);border-radius:10px 0 0 10px;color:var(--muted)}

/* ---------- 页脚 ---------- */
.main-footer-section{background:#050506;border-top:1px solid var(--line);color:#9ca3af;padding:26px 0;margin-top:20px}
.main-footer-section a{color:#9ca3af}
.main-footer-section a:hover{color:var(--brand)}
.main-footer-section__midline-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px}
.main-footer-section__midline-links .ml-auto{margin-left:auto}

/* ---------- 杂项 ---------- */
.page-section__header{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;margin-bottom:16px;color:var(--ink)}
.page-section__header:before{content:"";width:4px;height:18px;background:var(--gold-grad);border-radius:2px}
.top-sticky-block{position:sticky;top:80px}
.show-more-btn-container{text-align:center;margin-top:10px}
.show-more-btn{background:transparent;border:1.5px solid var(--brand);color:var(--brand);border-radius:999px;padding:9px 30px;font-weight:500}
.show-more-btn:hover{background:var(--brand);color:#0d0d0f}
.table-goods{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table-goods:hover{box-shadow:var(--shadow-lg)}
.count__ctrl,.count__num{font-weight:600}

/* ==================== 手机端自适应 ==================== */
@media (max-width: 767px){
  body{font-size:14px}
  .content.container{padding-top:14px;padding-bottom:24px}
  .navbar-white .navbar-brand{height:56px}
  .navbar-white .navbar-brand img{height:32px!important}
  .navbar-white .navbar-collapse{background:var(--card);border-bottom:1px solid var(--line)}
  .navbar-white .navbar-nav>li>a{padding:12px 15px}
  .category-container{padding:14px 12px}
  .category-btn{font-size:12px;padding:7px 16px!important;margin:0 6px 8px 0!important}
  .panel-body{padding:12px 14px}
  .panel-default>.panel-heading{padding:14px 14px 4px;font-size:15px}
  .product-grid-item,.grid-item{flex:0 0 50%;max-width:50%;padding:6px}
  .product__description{padding:10px 12px}
  .product_name{font-size:13px}
  .tb-recommend-content-item .info-wrapper{padding:10px 12px}
  .tb-recommend-content-item .info-wrapper .title{font-size:13px}
  .goods-detail{padding:12px;border-radius:12px}
  .goods-page-cover{max-height:300px}
  .prod-details__prod-name{font-size:17px}
  .prod-offering{padding:16px;border-radius:12px}
  .prod-offering__prices .price-value{font-size:24px}
  .prod-offering__cart-btn .btn{font-size:15px;padding:12px}
  .prod-details__specifications,.prod-offering__delivinfo{padding:10px 12px}
  .main-footer-section__midline-links{flex-direction:column;align-items:flex-start;gap:8px}
  .main-footer-section__midline-links .ml-auto{margin-left:0}
  .btn-lg{padding:11px 18px}
  .form-control{height:42px}
  .top-sticky-block{position:static}
  .breadcrumbs{padding:10px 14px;overflow-x:auto;white-space:nowrap}
}
@media (max-width: 374px){
  .product-grid-item,.grid-item{flex:0 0 100%;max-width:100%}
}
/* 容器自适应安全兜底 */
.container{width:100%;max-width:1300px;margin-left:auto;margin-right:auto}
@media(min-width:1200px){.container{max-width:1300px}}