:root {
    --xj-primary: #6d28d9;
    --xj-primary-deep: #4c1d95;
    --xj-primary-soft: #f1eafe;
    --xj-accent: #8b5cf6;
    --xj-text: #21143f;
    --xj-muted: #746987;
    --xj-border: #ebe5f4;
    --xj-surface: #ffffff;
    --xj-background: #f8f6fc;
}

html,
body {
    color: var(--xj-text);
    background: var(--xj-background);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

.el-button--primary,
.el-pagination.is-background .el-pager li:not(.disabled).active {
    border-color: var(--xj-primary) !important;
    background: var(--xj-primary) !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
    border-color: var(--xj-accent) !important;
    background: var(--xj-accent) !important;
}

.el-button--text,
.el-link.el-link--default:hover,
.el-tabs__item.is-active,
.el-tabs__item:hover,
.el-pagination button:hover,
.el-pager li:hover,
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--xj-primary) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-checkbox__input.is-focus .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: var(--xj-primary) !important;
}

.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-tabs__active-bar {
    background: var(--xj-primary) !important;
}

.home,
.special-list,
.material-list,
.store-page,
.my {
    background: var(--xj-background) !important;
}

.home .main {
    padding-top: 28px;
}

.home .el-carousel__button {
    background: var(--xj-primary-soft);
}

.home .el-carousel__indicator.is-active .el-carousel__button {
    background: var(--xj-primary);
}

.base-footer {
    border-top: 1px solid var(--xj-border);
}

@media (max-width: 1199px) {
    .base-header > div:not(:first-child),
    .base-header > div.primary-nav,
    .base-header .bar-inner,
    .base-footer .el-row {
        width: 100% !important;
    }

    .base-header > div.primary-nav {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .base-header .brand-button {
        width: 190px;
        flex: 0 0 190px;
    }

    .base-header .brand-lockup {
        width: 184px;
    }

    .base-header .brand-lockup img {
        top: -63px;
        width: 184px;
        height: 184px;
    }

    .base-header .nav-links {
        gap: 18px;
        overflow-x: auto;
        padding-left: 12px;
        scrollbar-width: none;
    }

    .base-header .nav-links::-webkit-scrollbar {
        display: none;
    }

    .base-header .nav-links .el-link {
        flex: 0 0 auto;
    }

    .base-header .nav-search {
        display: none !important;
    }

    .store-page {
        min-width: 0 !important;
    }

    .store-page .store-container {
        width: calc(100% - 40px) !important;
    }

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .product-detail-card {
        grid-template-columns: minmax(360px, 44%) minmax(0, 1fr) !important;
        gap: 28px !important;
    }
}

@media (max-width: 760px) {
    .base-header .button-bar {
        display: none !important;
    }

    .base-header > div.primary-nav {
        height: 68px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .base-header .brand-button {
        width: 168px;
        flex-basis: 168px;
    }

    .base-header .brand-lockup {
        width: 162px;
        height: 58px;
    }

    .base-header .brand-lockup img {
        top: -54px;
        width: 162px;
        height: 162px;
    }

    .base-header .nav-links {
        gap: 22px;
    }

    .store-page .store-container {
        width: calc(100% - 24px) !important;
    }

    .store-hero .store-container,
    .product-detail-card {
        grid-template-columns: 1fr !important;
    }

    .store-hero .store-container {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
    }

    .hero-assurance {
        gap: 14px;
        padding: 14px;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-detail-card {
        display: grid !important;
        padding: 18px !important;
    }

    .main-image {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .review-overview {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 18px;
    }
}