/**
 * Aylaobuy Design System — 响应式适配
 * 统一收纳所有断点样式，避免各页面分散写 media query。
 * 需在其他 CSS 文件之后最后引入，确保断点样式能覆盖基础样式。
 */

@media (max-width: 900px){
    .ay-header-flex{ justify-content:center; text-align:center; }
    .ay-header-search{ order:3; flex-basis:100%; }
    .ay-header-icons{ order:2; width:100%; justify-content:center; }
    .ay-flow-nav{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 860px){
    .ay-hero-art{ display:none; }
}

@media (max-width: 760px){
    .ay-split{ grid-template-columns:1fr; }
    .ay-gallery-photo img{ height:320px; }
    .ay-footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
    .ay-topbar-flex{ justify-content:center; text-align:center; }
    .ay-country-badge{ display:none; }
    .ay-member-box{ width:100%; }
    .ay-topnav-flex{
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        justify-content:flex-start;
        gap:18px;
    }
    .ay-cat-nav{
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:10px;
        scrollbar-width:thin;
    }
    .ay-cat-nav::-webkit-scrollbar{ height:3px; }
    .ay-cat-nav::-webkit-scrollbar-thumb{ background:#E4D5AE; border-radius:3px; }
    .ay-pagination{ gap:10px; }
    .ay-page-btn{ padding:7px 12px; font-size:12px; }
}

@media (max-width: 520px){
    .ay-flow-nav{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        gap:8px;
        padding-bottom:8px;
    }
    .ay-flow-btn{ flex:0 0 auto; min-width:108px; }
}

@media (max-width: 480px){
    .ay-hero-features{ grid-template-columns:1fr; }
    .ay-footer-grid{ grid-template-columns:1fr; }
    .ay-product-count{ flex-direction:column; gap:2px; }
}