/* ============================================================
   首页布局：顶部搜索大卡 + 左侧分类树 + 右侧商品表格
   适配亮/暗 glass 主题变量
   ============================================================ */

.shop-home {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 20px 60px;
}

/* 隐藏导航栏自带搜索框（首页已有大搜索卡） */
.shop-search { display: none !important; }

/* ---------- 顶部搜索大卡 ---------- */
.hero-card {
    background: var(--glass-bg-strong, rgb(255 255 255 / 0.82));
    -webkit-backdrop-filter: var(--glass-filter, blur(24px));
    backdrop-filter: var(--glass-filter, blur(24px));
    border: 1px solid var(--glass-border-soft, rgb(255 255 255 / 0.4));
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: var(--glass-shadow, 0 10px 36px rgb(31 45 70 / 0.1));
}
.hero-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--uc-ink-med, #58606e);
    font-size: 14px;
    margin-bottom: 14px;
}
.hero-head i { font-size: 15px; }
.hero-input-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.hero-input {
    flex: 1;
    border: 1px solid var(--glass-border-soft, rgb(0 0 0 / 0.08));
    background: var(--uc-field-bg, rgb(255 255 255 / 0.55));
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    color: var(--uc-ink, #1f2733);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.hero-input:focus {
    border-color: var(--uc-focus, #4c96e0);
    box-shadow: 0 0 0 3px rgb(76 150 224 / 0.15);
}
.hero-btn {
    flex: 0 0 auto;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 28px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.hero-btn:hover { background: #16a34a; }
.hero-btn:active { transform: scale(.97); }

/* ---------- 公告条 ---------- */
.notice-bar {
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--glass-bg-soft, rgb(255 255 255 / 0.5));
    border: 1px dashed var(--glass-border-soft, rgb(0 0 0 / 0.1));
    color: var(--uc-ink-med, #58606e);
    font-size: 13px;
    line-height: 1.7;
}

/* ---------- 两栏布局 ---------- */
.home-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

.side-card {
    width: 290px;
    flex: 0 0 290px;
    background: var(--glass-bg, rgb(255 255 255 / 0.68));
    -webkit-backdrop-filter: var(--glass-filter, blur(24px));
    backdrop-filter: var(--glass-filter, blur(24px));
    border: 1px solid var(--glass-border-soft, rgb(255 255 255 / 0.4));
    border-radius: 20px;
    box-shadow: var(--glass-shadow, 0 10px 36px rgb(31 45 70 / 0.1));
    padding: 16px 12px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.main-card {
    flex: 1;
    min-width: 0;
    background: var(--glass-bg, rgb(255 255 255 / 0.68));
    -webkit-backdrop-filter: var(--glass-filter, blur(24px));
    backdrop-filter: var(--glass-filter, blur(24px));
    border: 1px solid var(--glass-border-soft, rgb(255 255 255 / 0.4));
    border-radius: 20px;
    box-shadow: var(--glass-shadow, 0 10px 36px rgb(31 45 70 / 0.1));
    padding: 16px 20px 20px;
    min-height: 420px;
}

.side-title, .main-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--uc-ink, #1f2733);
    margin-bottom: 12px;
    padding: 2px 8px;
}
.title-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--uc-focus, #4c96e0);
    flex: 0 0 9px;
}

/* ---------- 分类树 ---------- */
.cate-tree { display: flex; flex-direction: column; gap: 6px; }
.cate-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 10px;
    color: var(--uc-ink, #1f2733);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
    transition: background .15s, color .15s;
}
.cate-link:hover { background: var(--glass-bg-soft, rgb(0 0 0 / 0.05)); }
.cate-link.is-active { color: #e8463f; font-weight: 600; }
.cate-icon {
    width: 22px; height: 22px;
    border-radius: 6px;
    flex: 0 0 22px;
    background: var(--glass-bg-soft, #e8e8e8) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: var(--uc-ink-med, #666);
}
.cate-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cate-arrow {
    margin-left: auto;
    font-size: 14px;
    transition: transform .2s;
    color: var(--uc-ink-dis, #999);
}
.cate-item.is-open > .cate-link .cate-arrow { transform: rotate(90deg); }
.cate-children { display: none; }
.cate-item.is-open > .cate-children { display: block; }
.cate-sub { padding-left: 34px; font-size: 13px; }
.cate-sub .cate-icon { width: 18px; height: 18px; flex-basis: 18px; border-radius: 5px; }
.cate-item.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 商品表格 ---------- */
.goods-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
}
.goods-thead {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    color: var(--uc-ink-med, #58606e);
    font-size: 13px;
    border-bottom: 1px solid var(--glass-border-soft, rgb(0 0 0 / 0.08));
}
.th-name, .td-name { flex: 1; min-width: 0; }
.th-num, .td-num { width: 90px; text-align: center; flex: 0 0 90px; }
.th-op, .td-op { width: 110px; text-align: center; flex: 0 0 110px; }

.goods-row {
    display: flex !important;
    align-items: flex-start;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 22px 8px;
    border-bottom: 1px solid var(--glass-border-soft, rgb(0 0 0 / 0.06));
    transition: background .15s;
}
.goods-row:hover { background: var(--glass-bg-soft, rgb(0 0 0 / 0.03)); }
.td-name {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: var(--uc-ink, #1f2733);
    line-height: 1.5;
}
.goods-thumb {
    width: 28px; height: 28px;
    border-radius: 6px;
    flex: 0 0 28px;
    margin-top: 2px;
    background: var(--glass-bg-soft, #eee) center/cover no-repeat;
}
.goods-name {
    font-size: 14px;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: clip;
}
.goods-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 0 0 auto;
    margin-top: 2px;
}
.goods-tag {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 6px;
    line-height: 1.7;
    white-space: nowrap;
    background: rgb(255 159 67 / 0.14);
    color: #ff9f43;
}
.goods-tag--red { background: rgb(232 70 63 / 0.12); color: #e8463f; }
.goods-tag--green { background: rgb(34 197 94 / 0.12); color: #22c55e; }
.goods-tag--blue { background: rgb(76 150 224 / 0.14); color: #4c96e0; }

.td-num { padding-top: 2px; }
.td-price { color: #ff5ca8; font-weight: 600; }
.td-stock { color: #22c55e; font-weight: 500; }
.td-warranty { color: var(--uc-ink-dis, #999); }

.op-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
}
.op-btn i { font-size: 12px; }
.op-buy { color: #22c55e; border-color: #22c55e; }
.op-buy:hover { background: #22c55e; color: #fff; }
.op-enter { color: #ff9f43; border-color: #ff9f43; }
.op-enter:hover { background: #ff9f43; color: #fff; }

.goods-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--uc-ink-dis, #999);
    font-size: 14px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .home-layout { flex-direction: column; }
    .side-card {
        width: 100%;
        flex: none;
        max-height: none;
    }
    .main-card { width: 100%; }
    .th-num, .td-num { width: 64px; flex-basis: 64px; font-size: 12px; }
    .th-op, .td-op { width: 80px; flex-basis: 80px; }
    .goods-name { font-size: 13px; }
    .goods-tag { display: none; }
}