@charset "utf-8";
/* ==========================================================================
   BAO100 mobile - content / marketing pages (P3)
   ========================================================================== */

/* ---------- search ---------- */
body.lu720-search {
    background: var(--canvas);
}

.search-bar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
}

.search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: .82rem;
    padding: 0 var(--space-3);
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--canvas);
    color: var(--ink);
    font-size: var(--fs-13);
    -webkit-appearance: none;
    appearance: none;
}

.search-input::placeholder {
    color: var(--placeholder);
}

.search-btn {
    flex: 0 0 1.55rem;
    height: .82rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-13);
    cursor: pointer;
}

.search-sort {
    display: flex;
    align-items: center;
    height: .82rem;
    padding: 0 var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.search-sort a {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: var(--space-5);
    color: var(--text-3);
    font-size: var(--fs-12);
    text-decoration: none;
}

.search-sort a.is-active {
    color: var(--ink);
    font-weight: 500;
    box-shadow: inset 0 -1px 0 var(--ink);
}

.search-sort a span {
    margin-left: .04rem;
    font-size: var(--fs-10);
}

.search-count {
    margin-left: auto;
    color: var(--text-3);
    font-size: var(--fs-10);
}

.search-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

body.lu720-search .search-main .product-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}

.search-empty {
    grid-column: 1 / -1;
    padding: var(--space-10) 0;
    text-align: center;
}

.search-empty .lu-btn {
    margin-top: var(--space-4);
}

.ajax-loading {
    grid-column: 1 / -1;
    padding: var(--space-4) 0;
    color: var(--text-3);
    font-size: var(--fs-12);
    text-align: center;
}

.product-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-media__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--canvas);
    color: var(--text-3);
    font-size: var(--fs-11);
    letter-spacing: .08em;
}


/* ---------- member zone ---------- */
.zone-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

body.lu720-member .zone-status {
    margin: 0 0 var(--space-3);
    padding: var(--space-4);
    border-radius: 0;
    background: var(--lu-sand);
    color: var(--ink);
    font-size: var(--fs-13);
    line-height: 1.6;
}

body.lu720-member .zone-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding: 0;
    background: transparent;
}

body.lu720-member .zone-cat {
    display: block;
    margin: 0;
    background: var(--surface);
    text-decoration: none;
}

body.lu720-member .zone-cat-pic {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
    background: var(--canvas);
}

body.lu720-member .zone-cat-pic img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.lu720-member .zone-cat-noimg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-3);
    font-size: var(--fs-12);
    letter-spacing: .02em;
}

body.lu720-member .zone-cat-name {
    display: block;
    margin: 0;
    padding: var(--space-3) var(--space-2);
    color: var(--ink);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-align: center;
}

body.lu720-member .zone-sort {
    margin: 0 0 var(--space-3);
    border-top: 0;
}

body.lu720-member .zone-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}


/* ---------- activity ---------- */
body.lu720-activity {
    background: var(--canvas);
}

.activity-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

.activity-hero {
    padding: var(--space-5) var(--space-4);
    background: var(--lu-sand);
}

.activity-hero__label {
    display: block;
    color: var(--ink);
    font-size: var(--fs-20);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .04em;
}

.activity-hero__time {
    margin: var(--space-2) 0 0;
    color: var(--text-2);
    font-size: var(--fs-12);
    line-height: 1.6;
}

.activity-hero__time .countdown {
    color: var(--ink);
    font-style: normal;
    font-weight: 500;
}

.activity-hero__btn {
    display: inline-flex;
    width: auto;
    min-width: 1.9rem;
    height: .8rem;
    margin-top: var(--space-3);
    padding: 0 var(--space-4);
    font-size: var(--fs-12);
}

.activity-list {
    margin-top: var(--space-3);
}

.activity-item {
    display: block;
    margin-bottom: var(--space-3);
    background: var(--surface);
}

.activity-item img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 1.2rem;
    object-fit: cover;
}


/* ---------- article ---------- */
body.lu720-article {
    background: var(--canvas);
}

.article-main {
    padding: var(--space-3) var(--space-4) 0;
}

.article-card {
    padding: var(--space-5) var(--space-4);
    background: var(--surface);
}

.article-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-24);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .02em;
}

.article-meta {
    margin: var(--space-2) 0 0;
    color: var(--text-3);
    font-size: var(--fs-11);
    line-height: 1.5;
}

.article-content {
    margin-top: var(--space-4);
    color: var(--text-2);
    font-size: var(--fs-14);
    line-height: 1.9;
    word-break: break-word;
}

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-3) auto;
}

.article-content p {
    margin: 0 0 var(--space-3);
}

.article-content h1,
.article-content h2,
.article-content h3 {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
}

.article-content a {
    color: var(--ink);
    text-decoration: underline;
}

.article-goods {
    margin-top: var(--space-4);
}

.article-goods__title {
    margin: 0 0 var(--space-3);
    color: var(--ink);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.4;
}

.article-goods__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.article-good {
    display: block;
    background: var(--surface);
    text-decoration: none;
}

.article-good__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--canvas);
}

.article-good__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.article-good__sold {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    padding: 0 .08rem;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-10);
    line-height: .32rem;
}

.article-good__name {
    display: -webkit-box;
    overflow: hidden;
    padding: var(--space-3) var(--space-3) 0;
    color: var(--ink);
    font-size: var(--fs-12);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-good__price {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-3);
    color: var(--ink);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.4;
}


/* ---------- brands ---------- */
body.lu720-brand {
    background: var(--canvas);
}

.brand-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

body.lu720-brand .brand-sort {
    margin: 0 0 var(--space-3);
    border-top: 0;
}

body.lu720-brand .brand-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}

.brand-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.1rem;
    padding: var(--space-3);
    background: var(--surface);
    text-decoration: none;
}

.brand-card__name {
    color: var(--ink);
    font-size: var(--fs-13);
    line-height: 1.4;
    text-align: center;
}


/* ---------- ranking / new / brand flash ---------- */
body.lu720-rank {
    background: var(--canvas);
}

.rank-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

.rank-hero {
    margin-bottom: var(--space-3);
    background: var(--surface);
}

.rank-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

.rank-hero__title {
    margin: 0;
    padding: var(--space-4) var(--space-4) 0;
    color: var(--ink);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.4;
}

.rank-hero__desc {
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1.7;
}

body.lu720-rank .rank-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}

body.lu720-rank .product-price del {
    margin-left: .08rem;
    color: var(--text-3);
    font-size: var(--fs-10);
    font-weight: 400;
}

body.lu720-rank .rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.lu720-rank .rank-grid > .product-card {
    flex: none;
    width: 100%;
    min-width: 0;
}


/* ---------- category index ---------- */
body.lu720-cate {
    background: var(--canvas);
}

.cate-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

body.lu720-cate .cate-wrap {
    display: flex;
    align-items: flex-start;
    background: var(--surface);
}

body.lu720-cate .cate-left {
    flex: 0 0 1.55rem;
    width: 1.55rem;
    padding: var(--space-2) 0;
    background: var(--canvas);
}

body.lu720-cate .tabs {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.lu720-cate .tabs li {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-2);
    border-left: 2px solid transparent;
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

body.lu720-cate .tabs li.acti {
    border-left-color: var(--ink);
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
}

body.lu720-cate .tabs-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-3);
}

body.lu720-cate .cate-right {
    display: none;
    position: static;
    width: auto;
    padding: 0;
}

body.lu720-cate .cate-right:first-child {
    display: block;
}

.cate-banner-link {
    position: relative;
    display: block;
    width: 100%;
    height: 1.5rem;
    overflow: hidden;
    background: var(--lu-sand);
    text-decoration: none;
}

.cate-banner {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cate-banner-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: var(--fs-16);
    letter-spacing: .06em;
}

body.lu720-cate .cate-sub,
body.lu720-cate .cate-brand {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

body.lu720-cate .cate-sub h3,
body.lu720-cate .cate-brand h3 {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-1);
    color: var(--ink);
    font-size: var(--fs-13);
    font-weight: 400;
    line-height: 1.4;
}

body.lu720-cate .cate-sub li a {
    display: block;
    padding: var(--space-3) var(--space-2);
    background: var(--canvas);
    color: var(--text-2);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

body.lu720-cate .cate-brand li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: .72rem;
    padding: var(--space-2);
    background: var(--canvas);
}

body.lu720-cate .cate-brand img {
    display: block;
    max-width: 1.4rem;
    max-height: .5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ---------- category index (unique classes, no legacy collisions) ---------- */
.cat-main {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4) var(--space-6);
    background: var(--canvas);
}

.cat-rail {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    background: var(--surface);
}

.cat-tabs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-tabs li {
    padding: var(--space-3) var(--space-2);
    border-left: 2px solid transparent;
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

.cat-tabs li.is-active {
    border-left-color: var(--ink);
    color: var(--ink);
    font-weight: 500;
}

.cat-panels {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-3);
    background: var(--surface);
}

.cat-panel {
    display: none;
}

.cat-panel:first-child {
    display: block;
}

.cat-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 1.5rem;
    overflow: hidden;
    background: var(--lu-sand);
    text-decoration: none;
}

.cat-banner img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-banner__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: var(--fs-16);
    letter-spacing: .06em;
}

.cat-block {
    margin-top: var(--space-4);
}

.cat-block h3 {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--fs-13);
    font-weight: 400;
    line-height: 1.4;
}

.cat-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.cat-sub-grid a {
    display: block;
    padding: var(--space-3) var(--space-2);
    background: var(--canvas);
    color: var(--text-2);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.cat-brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.cat-brand-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    min-height: .64rem;
    padding: var(--space-2);
    background: var(--canvas);
}

.cat-brand-row img {
    display: block;
    max-width: 1.2rem;
    max-height: .46rem;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ---------- about ---------- */
body.lu720-about {
    background: var(--canvas);
}

.about-main {
    padding: var(--space-3) var(--space-4) 0;
}

.about_banner {
    margin: 0 calc(-1 * var(--space-4)) var(--space-3);
}

.about_banner img {
    display: block;
    width: 100%;
    height: auto;
}

.about-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    margin-bottom: var(--space-3);
    background: var(--surface);
    scrollbar-width: none;
}

.about-nav::-webkit-scrollbar {
    display: none;
}

.about-nav a {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

body.lu720-about .am-panel {
    margin: 0 0 var(--space-3) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

body.lu720-about .am-panel-hd {
    padding: var(--space-4) !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-size: var(--fs-16) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

body.lu720-about .am-panel-bd {
    padding: 0 !important;
}

body.lu720-about .am-panel-bd > img {
    display: block;
    width: 100%;
    height: auto;
}

body.lu720-about .swiper-container {
    width: 100%;
    margin: 0;
}

body.lu720-about .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

body.lu720-about .swiper-pagination {
    position: static;
    padding: var(--space-2) 0;
    text-align: center;
}

body.lu720-about .am-panel-hd {
    text-align: left !important;
}

.about-nav a {
    flex: 1 1 0;
    padding: var(--space-3) 0;
    font-size: var(--fs-11);
    text-align: center;
}


/* ---------- shop / member category strips ---------- */
.category-strip,
.zone-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--line);
    scrollbar-width: none;
}

.category-strip::-webkit-scrollbar,
.zone-tabs::-webkit-scrollbar {
    display: none;
}

.category-strip a,
.zone-tabs a {
    flex: 0 0 auto;
    padding: .12rem .3rem;
    border: 1px solid var(--line);
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.category-strip a.is-active,
.zone-tabs a.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.zone-tabs {
    margin-bottom: var(--space-3);
    border-top: 0;
}

.brand-card {
    flex-direction: column;
    gap: var(--space-2);
}

.brand-card__logo {
    display: block;
    max-width: 1.4rem;
    max-height: .5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ---------- limited sale ---------- */
body.lu720-limit {
    background: var(--canvas);
}

.limit-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

.limit-tabs {
    display: flex;
    background: var(--surface);
}

.limit-tabs a {
    flex: 1 1 0;
    padding: var(--space-3) var(--space-2);
    color: var(--text-3);
    font-size: var(--fs-13);
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.limit-tabs a.is-active {
    color: var(--ink);
    font-weight: 500;
    box-shadow: inset 0 -1px 0 var(--ink);
}

.limit-tabs a span {
    display: block;
    margin-top: .06rem;
    color: var(--text-3);
    font-size: var(--fs-10);
    font-weight: 400;
}

.limit-hero {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: var(--space-4);
    background: var(--lu-sand);
}

.limit-hero__label {
    color: var(--text-2);
    font-size: var(--fs-12);
}

.limit-hero__time {
    color: var(--ink);
    font-size: var(--fs-20);
    font-style: normal;
    font-weight: 500;
}

.limit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.limit-card {
    background: var(--surface);
}

.limit-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
}

.limit-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.limit-card__body {
    padding: var(--space-3);
}

.limit-card__name {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-12);
    font-weight: 400;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.limit-card__desc {
    margin: .06rem 0 0;
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-10);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.limit-card__price {
    margin-top: var(--space-2);
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 1.4;
}

.limit-card__price em {
    margin-left: .08rem;
    color: var(--text-3);
    font-size: var(--fs-10);
    font-style: normal;
    font-weight: 400;
}

.limit-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.limit-progress__bar {
    flex: 1 1 auto;
    height: .1rem;
    overflow: hidden;
    background: var(--line);
}

.limit-progress__bar i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ink);
}

.limit-progress__num {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: var(--fs-10);
}

.limit-card__btn {
    width: 100%;
    height: .64rem;
    margin-top: var(--space-3);
    font-size: var(--fs-11);
}

.limit-empty {
    margin: 0;
}

.combine-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

.combine-free {
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--lu-sand);
    color: var(--ink);
    font-size: var(--fs-12);
    line-height: 1.5;
}

.combine-sort {
    margin-bottom: var(--space-3);
    border-top: 0;
}

body.lu720-combine .combine-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}

.group-main {
    padding: var(--space-3) var(--space-4) var(--space-6);
}

.group-banner {
    display: block;
    margin-bottom: var(--space-4);
}

.group-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.group-section {
    margin-bottom: var(--space-5);
}

.group-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.group-section__head h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.4;
}

.group-section__head p {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-11);
}

.group-section__head em {
    color: var(--ink);
    font-style: normal;
}

.group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.group-card {
    background: var(--surface);
}

.group-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
}

.group-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.group-card__body {
    padding: var(--space-3);
}

.group-card__body h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-12);
    font-weight: 400;
    line-height: 1.5;
}

.group-card__body p {
    margin: .06rem 0 0;
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-10);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-card__price {
    margin-top: var(--space-2);
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 1.4;
}

.group-card__price del {
    margin-left: .08rem;
    color: var(--text-3);
    font-size: var(--fs-10);
    font-weight: 400;
}

.group-card__meta {
    margin-top: .06rem;
    color: var(--text-3);
    font-size: var(--fs-10);
}

.group-card__btn {
    width: 100%;
    height: .64rem;
    margin-top: var(--space-3);
    font-size: var(--fs-11);
}

.article-list-main {
    padding: var(--space-3) var(--space-4) 0;
}

.article-list-card {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    text-decoration: none;
}

.article-list-card__title {
    display: block;
    color: var(--ink);
    font-size: var(--fs-15);
    line-height: 1.5;
}

.article-list-card__meta {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-3);
    font-size: var(--fs-11);
    line-height: 1.5;
}

.article-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    color: var(--text-3);
    font-size: var(--fs-11);
}

.article-pager a {
    color: var(--ink);
    text-decoration: underline;
}

.cat-circles {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--line);
    scrollbar-width: none;
}

.cat-circles::-webkit-scrollbar {
    display: none;
}

.cat-circle {
    flex: 0 0 auto;
    width: 1.15rem;
    text-align: center;
    text-decoration: none;
}

.cat-circle__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--canvas);
}

.cat-circle__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cat-circle__img em {
    color: var(--text-2);
    font-size: var(--fs-18);
    font-style: normal;
}

.cat-circle__all {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-20);
}

.cat-circle__name {
    display: block;
    margin-top: .08rem;
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-10);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-circle.is-active .cat-circle__img {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

.cat-circle.is-active .cat-circle__name {
    color: var(--ink);
    font-weight: 500;
}

.zone-circles {
    margin: 0 0 var(--space-3);
    border-top: 0;
}

/* Shop/member header: categories on the sage band, demo shop style */
body.header-on-dark .site-header .brand-wordmark img {
    filter: brightness(0) invert(1);
}

body.header-on-dark .menu-toggle span {
    background: #fff;
}

.shop-band,
.member-band {
    height: auto;
    min-height: 6.1rem;
    justify-content: flex-start;
    padding-top: calc(var(--lu-header-h) + .28rem);
    padding-bottom: .36rem;
}

.shop-band h1,
.member-band h1 {
    margin-top: .32rem;
}

.shop-band .breadcrumb,
.member-band .breadcrumb {
    margin-top: .18rem;
}

.cat-circles--onband {
    width: 100%;
    margin-top: auto;
    padding: .46rem .3rem 0;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    justify-content: flex-start;
}

.cat-circles--onband .cat-circle {
    width: 1.9rem;
}

.cat-circles--onband .cat-circle__img {
    width: 1.9rem;
    height: 1.9rem;
    padding: .18rem;
    box-sizing: border-box;
    border: 0;
    background: #fff;
}

.cat-circles--onband .cat-circle__img img {
    border-radius: 0;
    object-fit: contain;
}

.cat-circles--onband .cat-circle__all {
    padding: 0;
    background: #111;
    color: #fff;
    font-size: .34rem;
}

.cat-circles--onband .cat-circle__name {
    margin-top: .18rem;
    color: #fff;
    font-size: .22rem;
    letter-spacing: .1em;
}

.cat-circles--onband .cat-circle.is-active .cat-circle__img {
    border: 0;
    box-shadow: 0 0 0 2px #fff;
}

.cat-circles--onband .cat-circle.is-active .cat-circle__name {
    color: #fff;
    font-weight: 500;
}

body.header-on-dark .site-header.is-scrolled .brand-wordmark img {
    filter: none;
}

body.header-on-dark .site-header.is-scrolled .menu-toggle span {
    background: var(--ink);
}

/* Match demo: 90px circles inside 150px category cells, no extra gap */
.cat-circles--onband {
    gap: 0;
    padding: .4rem 0 0;
}

.cat-circles--onband .cat-circle {
    width: 2.9rem;
    padding: .38rem .2rem 0;
    box-sizing: border-box;
}

.cat-circles--onband .cat-circle__img {
    width: 1.73rem;
    height: 1.73rem;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.cat-circles--onband .cat-circle__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cat-circles--onband .cat-circle__name {
    margin-top: .16rem;
    font-size: .28rem;
    letter-spacing: .06em;
}

body.lu720-shop .shop-sort {
    margin: 0 0 var(--space-3);
    border-top: 0;
}

body.lu720-shop .shop-grid {
    width: 100%;
    margin: 0;
    gap: var(--space-3);
}