/**
 * 特殊商品轮播 - 强制样式
 * 此文件使用最高优先级，确保轮播样式不被覆盖
 * 独立文件，避免冲突
 */

/* ========================================
   核心布局 - 最高优先级
   ======================================== */

/* 强制容器为flex布局 - 单行显示 */
body .special-goods-sections .special-section .section-content-track > ul,
body .special-goods-sections .special-section .section-content-track .am-g,
html body .special-goods-sections .special-section .section-content-track > ul,
html body .special-goods-sections .special-section .section-content-track .am-g {
    display: flex !important;
    -webkit-display: flex !important;
    -ms-display: flex !important;
    flex-flow: row nowrap !important;
    -webkit-flex-flow: row nowrap !important;
    -ms-flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-direction: row !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
    overflow: visible !important;
    /* 强制单行，禁止换行 */
    height: auto !important;
    /* 重置AmazeUI的am-avg布局 */
    font-size: 0 !important;
}

/* 禁用ul的所有可能导致换行的样式 */
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"],
body .special-goods-sections .special-section .section-content-track > ul[class*="am-g"] {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* 强制子项为固定宽度 - PC端5个 - 禁止换行 */
body .special-goods-sections .special-section .section-content-track > ul > li,
body .special-goods-sections .special-section .section-content-track .am-g > div,
body .special-goods-sections .special-section .section-content-track > ul > li[class*="am-u"],
body .special-goods-sections .special-section .section-content-track .am-g > div[class*="am-u"],
html body .special-goods-sections .special-section .section-content-track > ul > li,
html body .special-goods-sections .special-section .section-content-track .am-g > div {
    flex: 0 0 20% !important;
    -webkit-flex: 0 0 20% !important;
    -ms-flex: 0 0 20% !important;
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-grow: 0 !important;
    -webkit-flex-grow: 0 !important;
    -ms-flex-positive: 0 !important;
    flex-basis: 20% !important;
    -webkit-flex-basis: 20% !important;
    -ms-flex-preferred-size: 20% !important;
    max-width: 20% !important;
    min-width: 20% !important;
    width: 20% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    /* 强制不换行 */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    /* 恢复字体大小 */
    font-size: 1rem !important;
}

/* 强制禁用am-avg类的换行行为 */
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"] > li {
    flex: 0 0 20% !important;
    -webkit-flex: 0 0 20% !important;
    -ms-flex: 0 0 20% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 20% !important;
    max-width: 20% !important;
    min-width: 20% !important;
    width: 20% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
}

/* 强制禁用所有am-u-*类的默认宽度 */
body .special-goods-sections .special-section .section-content-track > ul > li[class*="am-u-sm"],
body .special-goods-sections .special-section .section-content-track > ul > li[class*="am-u-md"],
body .special-goods-sections .special-section .section-content-track > ul > li[class*="am-u-lg"] {
    width: 20% !important;
    flex: 0 0 20% !important;
}

/* 禁用可能的换行 */
body .special-goods-sections .special-section .section-content-track > ul > li,
body .special-goods-sections .special-section .section-content-track .am-g > div {
    white-space: normal !important;
}

/* 确保轨道容器正确 - 只显示一行 */
body .special-goods-sections .special-section .section-content-track {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* 强制section-content-slider隐藏溢出 */
body .special-goods-sections .special-section .section-content-slider {
    overflow: hidden !important;
    width: 100% !important;
}

/* 强制禁用所有可能的换行 */
body .special-goods-sections .special-section .section-content-track > ul,
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"],
body .special-goods-sections .special-section .section-content-track > ul[class*="am-g"],
html body .special-goods-sections .special-section .section-content-track > ul,
html body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"],
html body .special-goods-sections .special-section .section-content-track > ul[class*="am-g"] {
    display: flex !important;
    -webkit-display: flex !important;
    -ms-display: flex !important;
    flex-direction: row !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-wrap: nowrap !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    overflow: visible !important;
    /* 强制单行，无论内容多少 */
    white-space: nowrap !important;
}

/* 禁用AmazeUI的::before和::after伪元素可能导致的换行 */
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"]::before,
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"]::after,
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"] > li::before,
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"] > li::after {
    display: none !important;
    content: none !important;
}

/* 滑动容器 - 确保单行 */
body .special-goods-sections .special-section .section-content-slider {
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
}

/* ========================================
   响应式布局
   ======================================== */

/* 大屏幕 (1200px以上) - 显示5个 */
@media only screen and (min-width: 1200px) {
    body .special-goods-sections .special-section .section-content-track > ul > li,
    body .special-goods-sections .special-section .section-content-track .am-g > div {
        flex: 0 0 20% !important;
        -webkit-flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 20% !important;
        width: 20% !important;
    }
}

/* 中等屏幕 (992px-1199px) - 显示4个 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    body .special-goods-sections .special-section .section-content-track > ul > li,
    body .special-goods-sections .special-section .section-content-track .am-g > div {
        flex: 0 0 25% !important;
        -webkit-flex: 0 0 25% !important;
        max-width: 25% !important;
        min-width: 25% !important;
        width: 25% !important;
    }
}

/* 平板 (768px-991px) - 显示3个 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body .special-goods-sections .special-section .section-content-track > ul > li,
    body .special-goods-sections .special-section .section-content-track .am-g > div {
        flex: 0 0 33.333333% !important;
        -webkit-flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        min-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* 手机 (小于768px) - 显示2个 */
@media only screen and (max-width: 767px) {
    body .special-goods-sections .special-section .section-content-track > ul > li,
    body .special-goods-sections .special-section .section-content-track .am-g > div {
        flex: 0 0 50% !important;
        -webkit-flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        width: 50% !important;
    }
}

/* ========================================
   商品卡片内容优化
   ======================================== */

/* 确保商品图片不溢出 */
body .special-goods-sections .special-section .section-content-track img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 商品标题限制高度 */
body .special-goods-sections .special-section .section-content-track .goods-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.4em !important;
    max-height: 2.8em !important;
}

/* 商品价格不换行 */
body .special-goods-sections .special-section .section-content-track .price-content {
    white-space: nowrap !important;
}

/* ========================================
   轮播按钮样式
   ======================================== */

body .special-goods-sections .special-section .carousel-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 100 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .special-goods-sections .special-section .carousel-btn:hover {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-50%) scale(1.1) !important;
    -webkit-transform: translateY(-50%) scale(1.1) !important;
}

body .special-goods-sections .special-section .carousel-btn-prev {
    left: 0 !important;
}

body .special-goods-sections .special-section .carousel-btn-next {
    right: 0 !important;
}

body .special-goods-sections .special-section .carousel-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

body .special-goods-sections .special-section .carousel-btn:disabled:hover {
    transform: translateY(-50%) scale(1) !important;
    -webkit-transform: translateY(-50%) scale(1) !important;
}

/* ========================================
   轮播容器
   ======================================== */

body .special-goods-sections .special-section .section-carousel-wrapper {
    position: relative !important;
    padding: 10px 60px !important;
    overflow: visible !important;
}

body .special-goods-sections .special-section .section-content-slider {
    overflow: hidden !important;
    width: 100% !important;
}

/* ========================================
   手机端优化
   ======================================== */

@media only screen and (max-width: 767px) {
    body .special-goods-sections .special-section .section-carousel-wrapper {
        padding: 10px 50px !important;
    }
    
    body .special-goods-sections .special-section .carousel-btn {
        width: 40px !important;
        height: 40px !important;
    }
    
    body .special-goods-sections .special-section .carousel-btn i {
        font-size: 20px !important;
    }
}

/* ========================================
   禁用可能的冲突样式
   ======================================== */

/* 禁用AmazeUI的avg布局对特殊区域的影响 */
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"],
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-2,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-3,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-5 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"] > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-2 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-3 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-5 > li {
    width: 20% !important;
    flex: 0 0 20% !important;
    -webkit-flex: 0 0 20% !important;
    -ms-flex: 0 0 20% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 20% !important;
    max-width: 20% !important;
    min-width: 20% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
}

/* 禁用Grid系统对特殊区域的影响 */
body .special-goods-sections .special-section .section-content-track .am-g[class*="am-collapsed"] {
    margin: 0 !important;
}

/* ========================================
   兼容性前缀
   ======================================== */

/* Flexbox兼容性 */
body .special-goods-sections .special-section .section-content-track > ul,
body .special-goods-sections .special-section .section-content-track .am-g {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

/* Transform兼容性 */
body .special-goods-sections .special-section .section-content-track {
    -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
    transition: transform 0.4s ease-in-out !important;
    
    -webkit-will-change: transform !important;
    will-change: transform !important;
}

/* ========================================
   强制显示优先级（最高）
   ======================================== */

html body .special-goods-sections .special-section .section-content-track > ul,
html body .special-goods-sections .special-section .section-content-track .am-g {
    display: flex !important;
    flex-wrap: nowrap !important;
}

html body .special-goods-sections .special-section .section-content-track > ul > li,
html body .special-goods-sections .special-section .section-content-track .am-g > div {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ========================================
   超级强制规则 - 针对AmazeUI的am-avg布局
   ======================================== */

/* 强制禁用AmazeUI的am-avg自动宽度 */
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-2 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-3 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-4 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-5 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-sm-6 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-2 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-3 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-4 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-5 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-md-6 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-2 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-3 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-4 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-5 > li,
body .special-goods-sections .special-section .section-content-track > ul.am-avg-lg-6 > li {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    min-width: 20% !important;
}

/* 禁用am-avg布局的before/after伪元素 */
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"]::before,
body .special-goods-sections .special-section .section-content-track > ul[class*="am-avg"]::after {
    display: none !important;
    content: none !important;
}

/* 强制单行 - 最终方案 */
body .special-goods-sections .special-section .section-content-track > ul {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

/* 确保每个li都不换行 */
body .special-goods-sections .special-section .section-content-track > ul > li {
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 20% !important;
    -ms-flex: 0 0 20% !important;
    flex: 0 0 20% !important;
}

