/**
 * 商城首页轮播广告样式（MD3 变量 + 深色模式）
 * 固定高度：移动端 250px / 平板 300px / PC 400px，object-fit: cover
 */

/* 空广告提示 - MD3 变量 */
.sanxio-mall-banner__container .sanxio-carousel--empty {
    width: 100% !important;
    height: 100% !important;
}

.sanxio-mall-banner__container .sanxio-carousel__empty-message {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--md-sys-color-surface-container, #f5f5f5) !important;
    color: var(--md-sys-color-on-surface-variant, #666) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    border: 2px dashed var(--md-sys-color-outline-variant, #ddd) !important;
    border-radius: 8px !important;
}

.sanxio-mall-banner__container .sanxio-carousel__empty-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

.sanxio-mall-banner__container .sanxio-carousel__empty-text {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--md-sys-color-on-surface, #333) !important;
    margin-bottom: 8px !important;
}

.sanxio-mall-banner__container .sanxio-carousel__empty-hint {
    font-size: 14px !important;
    color: var(--md-sys-color-on-surface-variant, #666) !important;
    line-height: 1.5 !important;
}

@media (max-width: 767px) {
    .sanxio-mall-banner__container .sanxio-carousel__empty-icon { font-size: 36px !important; margin-bottom: 12px !important; }
    .sanxio-mall-banner__container .sanxio-carousel__empty-text { font-size: 16px !important; }
    .sanxio-mall-banner__container .sanxio-carousel__empty-hint { font-size: 12px !important; }
}

/* 外层容器 - 与首页一致：内容轨内铺满，禁止 100vw 破版
 * 去掉半透明描边/四向阴影：放大后会在导航与 Banner 接缝处像「多了一条透明线」 */
.sanxio-mall-banner {
    background: var(--md3-color-surface-container-low, #f3f5f9) !important;
    border-radius: var(--md3-shape-md, 12px) !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 250px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: var(--sanxio-content-gap, 12px) !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transition: box-shadow 0.3s ease !important;
}

/* 贴近主流电商：轮播容器悬停不做上浮/阴影变化，仅箭头保留悬停反馈 */

.sanxio-mall-banner__container {
    width: 100% !important;
    height: 250px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    border-radius: inherit !important;
}

.sanxio-mall-banner__container .sanxio-carousel,
.sanxio-mall-banner__container .sanxio-carousel__wrapper,
.sanxio-mall-banner__container .sanxio-carousel__track,
.sanxio-mall-banner__container .sanxio-carousel__slide,
.sanxio-mall-banner__container .sanxio-carousel__slide a,
.sanxio-mall-banner__container .sanxio-carousel__slide img {
    width: 100% !important;
    height: 100% !important;
}

.sanxio-mall-banner__container .sanxio-carousel { position: relative !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
.sanxio-mall-banner__container .sanxio-carousel__wrapper { position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; }
.sanxio-mall-banner__container .sanxio-carousel__track {
    display: flex !important; flex-wrap: nowrap !important;
    transition: transform 0.5s ease-in-out !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.sanxio-mall-banner__container .sanxio-carousel__slide { flex: 0 0 100% !important; position: relative !important; overflow: hidden !important; }
.sanxio-mall-banner__container .sanxio-carousel__slide a { display: block !important; }
.sanxio-mall-banner__container .sanxio-carousel__slide img {
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	max-width: none !important;
}

/* 左右箭头（叠在图上用 surface 色，MD3 下用 surface） */
.sanxio-mall-banner__container .sanxio-carousel__prev,
.sanxio-mall-banner__container .sanxio-carousel__next {
    position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 56px !important; height: 56px !important;
    background: var(--md-sys-color-surface-container, rgba(255, 255, 255, 0.95)) !important;
    color: var(--md-sys-color-on-surface, #333) !important;
    border: none !important; border-radius: 50% !important;
    font-size: 28px !important; font-weight: 600 !important; line-height: 1 !important;
    text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important; cursor: pointer !important; z-index: 20 !important;
    opacity: 0.85 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important; user-select: none !important; visibility: visible !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.sanxio-mall-banner__container .sanxio-carousel__prev { left: 15px !important; }
.sanxio-mall-banner__container .sanxio-carousel__next { right: 15px !important; }
.sanxio-mall-banner__container .sanxio-carousel__prev:hover,
.sanxio-mall-banner__container .sanxio-carousel__next:hover {
    opacity: 1 !important; background: var(--md-sys-color-surface, #fff) !important;
    transform: translateY(-50%) scale(1.1) !important;
}
.sanxio-mall-banner__container .sanxio-carousel__prev:active,
.sanxio-mall-banner__container .sanxio-carousel__next:active {
    transform: translateY(-50%) scale(0.95) !important;
}
@media (min-width: 768px) {
    .sanxio-mall-banner__container .sanxio-carousel:hover .sanxio-carousel__prev,
    .sanxio-mall-banner__container .sanxio-carousel:hover .sanxio-carousel__next { opacity: 1 !important; visibility: visible !important; }
    .sanxio-mall-banner__container .sanxio-carousel__prev,
    .sanxio-mall-banner__container .sanxio-carousel__next { opacity: 0.7 !important; }
}
@media (max-width: 767px) {
    .sanxio-mall-banner__container .sanxio-carousel__prev,
    .sanxio-mall-banner__container .sanxio-carousel__next { display: none !important; }
}

/* 指示器 */
.sanxio-mall-banner__container .sanxio-carousel__indicators {
    position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; z-index: 10 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.sanxio-mall-banner__container .sanxio-carousel__indicator {
    width: 12px !important; height: 12px !important; border-radius: 50% !important;
    background: var(--md-sys-color-on-surface-variant, rgba(255, 255, 255, 0.4)) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid var(--md-sys-color-outline-variant, rgba(255, 255, 255, 0.6)) !important;
    padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.sanxio-mall-banner__container .sanxio-carousel__indicator.active {
    background: var(--md-sys-color-surface, #fff) !important;
    border-color: var(--md-sys-color-surface, #fff) !important;
    width: 32px !important; border-radius: 6px !important;
}

/* 平板 */
@media (min-width: 768px) and (max-width: 991px) {
    .sanxio-mall-banner {
        height: 300px !important;
        border-radius: var(--md3-shape-md, 12px) !important;
        margin-top: 0 !important;
        margin-bottom: var(--sanxio-content-gap, 12px) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .sanxio-mall-banner__container { height: 300px !important; }
}

/* PC */
@media (min-width: 992px) {
    .sanxio-mall-banner {
        height: 400px !important;
        border-radius: var(--md3-shape-lg, 16px) !important;
        margin-top: 0 !important;
        margin-bottom: var(--sanxio-content-gap, 12px) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .sanxio-mall-banner__container { height: 400px !important; }
}

.sanxio-mall-banner,
body .sanxio-mall-banner {
    overflow: hidden !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

/* 勿再用 :has 清掉 .sx-mall-page 的 max-width:1280，否则整页破版、看起来像「没改好」 */

/* 无广告时占位 */
.sanxio-mall-banner__fallback {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    background: var(--md-sys-color-surface-container, #f5f5f5);
    color: var(--md-sys-color-on-surface-variant, #666); font-size: 14px; text-align: center; padding: 20px; border-radius: inherit;
}
.sanxio-mall-banner__container:empty ~ .sanxio-mall-banner__fallback,
.sanxio-mall-banner.banner-no-ad .sanxio-mall-banner__fallback { display: flex !important; }

/* 深色模式 - MD3 */
:root[data-theme="dark"] .sanxio-mall-banner,
:root.theme-dark .sanxio-mall-banner {
    background-color: var(--md-sys-color-surface) !important;
    border: none !important;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.45) !important;
}
:root[data-theme="dark"] .sanxio-mall-banner__container .sanxio-carousel__empty-message,
:root.theme-dark .sanxio-mall-banner__container .sanxio-carousel__empty-message {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}
:root[data-theme="dark"] .sanxio-mall-banner__container .sanxio-carousel__empty-text,
:root.theme-dark .sanxio-mall-banner__container .sanxio-carousel__empty-text {
    color: var(--md-sys-color-on-surface) !important;
}
:root[data-theme="dark"] .sanxio-mall-banner__container .sanxio-carousel__empty-hint,
:root.theme-dark .sanxio-mall-banner__container .sanxio-carousel__empty-hint {
    color: var(--md-sys-color-on-surface-variant) !important;
}
:root[data-theme="dark"] .sanxio-mall-banner__fallback,
:root.theme-dark .sanxio-mall-banner__fallback {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* ========== 商城首页轮播下方：热销区（无外层卡片） ========== */
.sanxio-mall-index-products {
    margin-top: var(--sanxio-content-gap, 16px);
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
}
.sx-mall-feed__head {
    margin-bottom: var(--sanxio-content-gap, 12px);
    padding-bottom: var(--sanxio-gap-sm, 8px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e7e0ec);
}
.sx-mall-feed__title {
    font: var(--md-sys-typescale-title-medium-font, 500 16px/24px Roboto);
    color: var(--md-sys-color-on-surface, #1c1b1f);
    margin: 0;
}
.sanxio-mall-index-products__list,
.sx-mall-feed__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sanxio-content-gap, 12px);
}
.sanxio-mall-index-products__list .sanxio-home-product-card {
    min-width: 0;
}
.sanxio-mall-index-products__more {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
}
.sanxio-mall-index-products__more a {
    color: var(--md-sys-color-primary, #6750a4);
    text-decoration: none;
}
.sanxio-mall-index-products__more a:hover {
    text-decoration: underline;
}
@media (min-width: 768px) {
    .sanxio-mall-index-products__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}
@media (min-width: 992px) {
    .sanxio-mall-index-products__list {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
}