/*
  Duohaoge-like home UI (structure + feeling only)
  - 毛玻璃卡片
  - 顶部大搜索条
  - 左侧分类胶囊
  - 右侧列表行
*/

:root{
  --dh-radius: 18px;
  --dh-radius-sm: 14px;
  --dh-glass: rgba(255,255,255,0.22);
  --dh-glass-2: rgba(255,255,255,0.16);
  --dh-stroke: rgba(255,255,255,0.26);
  --dh-text: rgba(255,255,255,0.92);
  --dh-text-muted: rgba(255,255,255,0.70);
  --dh-shadow: 0 18px 48px rgba(0,0,0,0.18);
}

/* 背景与导航 */
.dh-body{ min-height: 100vh; }
.dh-navbar{ background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.15); }
.dh-brand{ color: rgba(255,255,255,0.90); letter-spacing: .2px; }
.dh-nav-link{ color: rgba(255,255,255,0.80); text-decoration: none; padding: .35rem .7rem; border-radius: 999px; }
.dh-nav-link:hover{ background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.95); }

/* 顶部导航：柔和粉色（不刺眼） */
.dh-navbar .navbar-brand,
.dh-navbar .nav-link{
  color: rgba(255, 165, 220, 0.92) !important;
}
.dh-navbar .nav-link:hover{
  color: rgba(255, 200, 235, 0.98) !important;
}
.dh-navbar .nav-link.active{
  color: rgba(255, 220, 245, 0.98) !important;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}
/* 顶部小搜索框文字 */
.dh-navbar .form-control,
.dh-navbar .btn{
  color: rgba(255,255,255,0.92);
}

/* 卡片 */
.dh-card{ border-radius: var(--dh-radius); border: 1px solid var(--dh-stroke); box-shadow: var(--dh-shadow); overflow: hidden; }
.dh-card-glass{ background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)); backdrop-filter: blur(14px); }
.dh-card-title{ display:flex; align-items:center; gap:.6rem; padding: 14px 16px; color: var(--dh-text); font-weight: 700; }
.dh-card-title i{ opacity: .9; }
.dh-card-body{ padding: 14px 16px 16px; color: var(--dh-text-muted); font-size: 14px; line-height: 1.6; }
.dh-notice{ max-height: 220px; overflow:auto; }

/* 顶部搜索条 */
.dh-search{ display:flex; align-items:center; gap: 12px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0,0,0,0.25); }
.dh-search-left{ display:flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); white-space: nowrap; }
.dh-search-input{ flex: 1; min-width: 120px; padding: 12px 14px; border: 0; outline: 0; border-radius: 999px; background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.95); }
.dh-search-input::placeholder{ color: rgba(255,255,255,0.55); }
.dh-search-btn{ padding: 12px 18px; border: 0; border-radius: 999px; background: rgba(73, 183, 90, 0.95); color: white; font-weight: 800; }
.dh-search-btn:active{ transform: translateY(1px); }

/* 分类 */
.dh-cate-list{ padding: 10px; display:flex; flex-direction:column; gap: 10px; }
.dh-cate-item{ display:flex; align-items:center; gap: 12px; padding: 10px 12px; border-radius: var(--dh-radius-sm);
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22);
  text-decoration:none; color: rgba(255,255,255,0.90);
}
.dh-cate-item:hover{ background: rgba(255,255,255,0.22); }
.dh-cate-item.is-active{ background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.22); }
.dh-cate-icon{ width: 32px; height: 32px; border-radius: 10px; background: rgba(0,0,0,0.20); flex: 0 0 auto; }
.dh-cate-icon-star{ display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,0.88); }
.dh-cate-name{ font-weight: 700; font-size: 14px; }
.dh-cate-arrow{ margin-left: auto; opacity: .75; }

/* 列表头 */
.dh-list-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px 0; }
.dh-sort{ display:flex; align-items:center; gap:8px; padding:0; background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 14px; position: relative; }
.dh-list-cols{ display:grid; grid-template-columns: 1fr 110px 110px 120px; gap: 10px;
  padding: 10px 16px 12px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.70); font-weight: 700; font-size: 13px;
}
.dh-col-stock, .dh-col-price{ text-align: right; }
.dh-col-buy{ text-align: right; }

/* 行 */
.dh-item-list{ padding: 0 8px 10px; }
.dh-item-message{ padding: 18px 16px; color: rgba(255,255,255,0.75); }

.dh-row{ display:grid; grid-template-columns: 1fr 110px 110px 120px; gap: 10px;
  align-items:center; padding: 14px 14px; margin: 0 8px;
  text-decoration:none; color: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.dh-row:hover{ background: rgba(255,255,255,0.06); border-radius: 14px; }
.dh-row-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.dh-row-icon{ width: 38px; height: 38px; border-radius: 12px; background: rgba(0,0,0,0.25); background-size: cover; background-position:center; flex: 0 0 auto; }
.dh-row-text{ min-width: 0; }
.dh-row-title{ font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-row-sub{ display:flex; align-items:center; gap: 8px; margin-top: 6px; }
.dh-tag{ font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.78); }
.dh-tag-hot{ background: rgba(255, 179, 0, 0.18); border-color: rgba(255, 179, 0, 0.25); }

.dh-row-stock{ text-align:right; font-weight: 900; color: rgba(255,255,255,0.92); }
.dh-row-price{ text-align:right; font-weight: 900; color: rgba(105, 216, 117, 0.95); }
.dh-yen{ opacity: .9; margin-right: 1px; }

.dh-row-buy{ text-align:right; }
.dh-buy-btn{ display:inline-flex; align-items:center; justify-content:center; min-width: 82px;
  padding: 10px 14px; border-radius: 999px; font-weight: 900; color: #fff;
  background: rgba(255, 127, 0, 0.95);
}
.dh-buy-btn.is-disabled{ background: rgba(255,255,255,0.26); color: rgba(255,255,255,0.70); }
.dh-row.is-soldout{ cursor:not-allowed; }

/* 响应式 */
@media (max-width: 991.98px){
  .dh-list-cols{ grid-template-columns: 1fr 90px 90px 100px; }
  .dh-row{ grid-template-columns: 1fr 90px 90px 100px; }
}

@media (max-width: 575.98px){
  .dh-search{ flex-wrap: wrap; border-radius: var(--dh-radius); }
  .dh-search-left{ width: 100%; justify-content:center; }
  .dh-search-input{ width: 100%; }
  .dh-search-btn{ width: 100%; }

  .dh-list-cols{ display:none; }
  .dh-row{ grid-template-columns: 1fr; gap: 12px; padding: 14px 12px; }
  .dh-row-stock, .dh-row-price, .dh-row-buy{ text-align:left; }
  .dh-row-buy{ display:flex; justify-content:flex-start; }
}


/* 分类数量徽标 */
.dh-cate-badge{
  margin-left: auto;
  margin-right: .4rem;
  min-width: 2.2rem;
  height: 1.55rem;
  padding: 0 .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.95);
  background: rgba(70,150,255,0.85);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.dh-cate-item:hover .dh-cate-badge{ filter: brightness(1.05); }
.dh-cate-item.is-active .dh-cate-badge{ background: rgba(70,150,255,0.95); }


/* Notice card */
.dh-notice-card{
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  overflow: hidden;
}
.dh-notice-title{
  padding: 12px 14px;
  font-weight: 700;
  display:flex;
  align-items:center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.dh-notice-body{
  padding: 12px 14px;
  color: rgba(0,0,0,.72);
}


/* 排序下拉 */
.dh-sort-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.86);
  padding: .18rem 1.2rem .18rem .15rem;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .2px;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}
.dh-sort-select:hover{ text-decoration: underline; text-underline-offset: 4px; }
.dh-sort-select:focus{ text-decoration: underline; }
.dh-sort-select:focus{
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.14);
}
.dh-sort{ position: relative; }
.dh-sort::after{
  content: "▾";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  pointer-events: none;
}
.dh-sort{ position: relative; }
.dh-sort-select option{
  color: #111;
}



/* 顶部导航：整体大一号、柔和粉色 */
.dh-navbar .nav-link{
  font-size: 16px;
  padding: .65rem .9rem;
  color: rgba(255,170,205,0.92) !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.dh-navbar .nav-link:hover{
  color: rgba(255,195,220,1) !important;
}
.dh-navbar .navbar-brand span{
  color: rgba(255,170,205,0.95) !important;
  font-size: 18px;
}
.dh-navbar .input-group .form-control{
  font-size: 15px;
}
.dh-navbar .btn{
  font-size: 15px;
}
.dh-navbar-right{
  display:flex;
  align-items:center;
  gap: 12px;
}
@media (max-width: 991.98px){
  .dh-navbar-right{ gap: 8px; }
  .dh-navbar .nav-link{ font-size: 15px; padding: .55rem .8rem; }
}


/* hide top header search (remove if you want it back) */
.search-input{ display:none !important; }


/* ===== 顶部导航精修（V5） ===== */
.dh-navbar{
  min-height: 64px;
}
.dh-topbar{
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.dh-brand-text{
  color: rgba(255, 165, 220, 0.95) !important;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .4px;
}
.dh-top-links .nav-link{
  font-size: 1.05rem;
  font-weight: 600;
  padding: .42rem .78rem !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dh-top-links{
  gap: .35rem;
}
.dh-top-auth .btn{
  font-size: 1.02rem;
  padding: .42rem .78rem;
  border-radius: 999px;
}
.dh-top-auth .btn-outline-light{
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
}
.dh-top-auth .btn-outline-light:hover{
  background: rgba(255,255,255,0.16);
}
.dh-top-auth .btn-primary{
  background: rgba(60, 150, 255, 0.92);
  border-color: rgba(60, 150, 255, 0.92);
}
.dh-top-auth .btn-primary:hover{
  background: rgba(60, 150, 255, 1);
}
.dh-navbar .user-avatar{ width: 28px; height: 28px; }
.dh-navbar .dh-user-name{ color: rgba(255, 205, 235, 0.96); font-weight: 600; }
.dh-navbar .dh-user-meta{ line-height: 1.05; }
.dh-navbar .dh-user-balance{ font-size: 12px; color: rgba(255,255,255,0.80); margin-top: 2px; }
.dh-navbar .dropdown-toggle::after{ opacity: .65; }

/* 让导航整体靠右且更紧凑（大屏） */
@media (min-width: 992px){
  .dh-navbar .navbar-collapse{ gap: .75rem; }
}

/* 小屏：折叠菜单更舒服 */
@media (max-width: 991.98px){
  .dh-top-auth{ padding-bottom: .35rem; }
  .dh-top-links .nav-link{ width: 100%; justify-content: flex-start; }
}

/* ===== V8 micro polish (nav hierarchy + motion) ===== */
:root{
  --dh-ease: cubic-bezier(.2,.8,.2,1);
}

/* 让“购物/订单查询”更像轻标签（行为层级），而不是按钮 */
.dh-top-links .nav-link{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  padding: .42rem .58rem !important;
  color: rgba(255,255,255,0.92) !important;
  opacity: .92;
  transition: opacity .18s var(--dh-ease), transform .18s var(--dh-ease);
}
.dh-top-links .nav-link:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.dh-top-links .nav-link::after{
  content: "";
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: .18rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s var(--dh-ease), opacity .18s var(--dh-ease);
  opacity: 0;
}
.dh-top-links .nav-link:hover::after{
  transform: scaleX(1);
  opacity: .9;
}

/* 登录/创建账号继续保持按钮感，但更细腻 */
.dh-top-auth .btn{
  transition: transform .18s var(--dh-ease), box-shadow .18s var(--dh-ease), background .18s var(--dh-ease);
}
.dh-top-auth .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.dh-top-auth .btn:active{
  transform: translateY(0px);
  box-shadow: none;
}

/* 顶部条整体更“收敛”，避免松散 */
.dh-navbar{
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.14);
}
@media (min-width: 992px){
  .dh-topbar{ padding-top: .48rem; padding-bottom: .48rem; }
  .dh-navbar .navbar-collapse{ justify-content: flex-end; }
  .dh-top-links{ margin-right: .6rem; }
}

/* 排序控件：更轻、更像文本 */
.dh-sort{ opacity: .88; }
.dh-sort:hover{ opacity: 1; }
.dh-sort-select{
  color: rgba(255,255,255,0.88);
  transition: opacity .18s var(--dh-ease), transform .18s var(--dh-ease);
}
.dh-sort-select:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.dh-sort::after{ color: rgba(255,255,255,0.65); }

/* 移动端：顶部按钮更容易点 */
@media (max-width: 575.98px){
  .dh-top-auth .btn{ padding: .5rem .85rem; }
  .dh-top-links .nav-link{ padding: .48rem .7rem !important; }
}

/* ===== 顶部站点名：只改文字颜色，不影响图标 ===== */
.dh-navbar .dh-brand-text {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.dh-navbar .navbar-brand:hover .dh-brand-text {
    opacity: 0.95;
}

/* ===== 商品列表 Hover 微动效 ===== */
.dh-product-row {
    position: relative;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.dh-product-row:hover {
    transform: translateY(-2px);
    background-color: rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.dh-product-row::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
    transition: left .6s ease;
    pointer-events: none;
}
.dh-product-row:hover::after {
    left: 120%;
}
.dh-product-row:hover .dh-buy-btn {
    filter: brightness(1.08);
}
/* ===== 左侧分类树形 ===== */

/* 子分类缩进 */
.dh-cate-item.is-child {
  padding-left: 36px;
  font-size: 14px;
  opacity: 0.9;
}

/* 父级箭头 */
.dh-cate-item.has-children .dh-cate-arrow {
  transition: transform .2s ease;
}

/* 收起状态 */
.dh-cate-item.collapsed .dh-cate-arrow {
  transform: rotate(-90deg);
}

/* 默认隐藏子分类 */
.dh-cate-item.is-child {
  display: none;
}

/* 展开后显示 */
.dh-cate-item.is-child.show {
  display: flex;
}


/* === Hotfix V3: force site title text to white (override pink rule) === */
.dh-navbar .navbar-brand .dh-brand-text{color:#ffffff !important;}