/**
 * 顶栏商品分类抽屉 — 间距与空态（覆盖 static/skin responsive 默认）
 */
/* ======== sanxio 商品分类抽屉 start =========== */
.mdc-category-drawer__header {
    padding: var(--sanxio-gap-sm, 8px) var(--sanxio-block-px, 16px) !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    line-height: 1.4 !important;
}

.mdc-category-drawer__title {
    height: auto !important;
    line-height: 1.4 !important;
    font-size: var(--text-md, 14px) !important;
    font-weight: 600 !important;
}

.mdc-category-drawer__body {
    padding: var(--sanxio-block-px, 16px);
}

.mdc-category-drawer--open:has(.sanxio-category-empty) {
    max-height: 220px;
}

.sanxio-category-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sanxio-gap-sm, 8px);
    padding: var(--sanxio-card-py, 20px) var(--sanxio-card-px, 16px);
    text-align: center;
    color: var(--md3-color-on-surface-variant, #43474e);
    font-size: var(--text-sm, 12px);
    line-height: 1.55;
}

.sanxio-category-empty__icon {
    font-size: 40px;
    color: var(--md3-color-outline, #74777f);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.sanxio-category-empty__text {
    max-width: 28rem;
}

.sanxio-category-empty__cta {
    margin-top: var(--sanxio-gap-sm, 8px);
    font-size: var(--text-sm, 12px);
    font-weight: 600;
    color: var(--md3-color-primary, #005fb8);
    text-decoration: none;
}

.sanxio-category-empty__cta:hover {
    text-decoration: underline;
}

.mdc-category-loading,
.mdc-category-error,
.mdc-category-empty:not(.sanxio-category-empty) {
    padding: var(--sanxio-block-px, 16px);
    text-align: center;
    font-size: var(--text-sm, 12px);
    line-height: 1.55;
    color: var(--md3-color-on-surface-variant, #43474e);
}

.mdc-category-error {
    color: var(--md3-color-error, #b3261e);
}

.mdc-category-item__child-block {
    display: flex;
    flex-direction: column;
    gap: var(--sanxio-gap-sm, 8px);
    margin-bottom: var(--sanxio-gap-sm, 8px);
}

.mdc-category-item__grandchildren {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sanxio-gap-sm, 8px);
    padding-left: var(--sanxio-gap-md, 12px);
}

.mdc-category-item__grand {
    font-size: var(--text-sm, 12px);
    color: var(--md3-color-on-surface-variant, #43474e);
    text-decoration: none;
    padding: 2px var(--sanxio-gap-sm, 8px);
    border-radius: var(--md3-shape-corner-small, 8px);
    background: var(--md3-color-surface-container-high, #eceef1);
}

.mdc-category-item__grand:hover {
    color: var(--md3-color-primary, #005fb8);
}

@media (min-width: 768px) {
    .mdc-category-drawer {
        background: var(--md3-color-surface-container-low, #f3f5f9) !important;
        border-bottom-color: var(--md3-color-outline-variant, #c3c6cf) !important;
    }

    .mdc-category-drawer--open {
        max-height: min(480px, 70vh) !important;
    }

    .mdc-category-drawer__content {
        max-width: var(--sanxio-page-max-width, 1280px);
        width: 100%;
        margin: 0 auto;
        padding-left: var(--sanxio-block-px, 20px);
        padding-right: var(--sanxio-block-px, 20px);
        box-sizing: border-box;
    }

    .mdc-category-drawer__header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
        border-bottom-color: var(--md3-color-outline-variant, #c3c6cf) !important;
    }

    .mdc-category-drawer__body {
        padding: var(--sanxio-content-gap, 20px) 0 var(--sanxio-block-px, 20px);
        max-height: min(400px, 58vh);
    }

    .mdc-category-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, 240px);
        justify-content: start;
        gap: var(--sanxio-content-gap, 12px);
    }

    .mdc-category-item {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border-radius: var(--md3-shape-corner-medium, 12px);
        border-color: var(--md3-color-outline-variant, #c3c6cf);
        background: var(--md3-color-surface, #fff);
    }

    .mdc-category-item__header {
        justify-content: center;
        padding: var(--sanxio-gap-md, 12px) var(--sanxio-block-px, 16px) !important;
    }

    .mdc-category-item__title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--text-md, 14px) !important;
    }

    /* 类目很少时避免整屏「大白条」 */
    .mdc-category-list:has(.mdc-category-item:only-child) {
        grid-template-columns: minmax(220px, 360px);
    }

    .mdc-category-drawer--open:has(.mdc-category-list .mdc-category-item:only-child) {
        max-height: 200px !important;
    }
}

/* 有模块导航条时，抽屉贴在主导航下方，避免与胶囊菜单重叠 */
@media (min-width: 768px) {
    body:has(.mdc-module-menu) .mdc-category-drawer {
        top: 158px !important;
    }
}
/* ======== sanxio 商品分类抽屉 end =========== */