/* =========================================================
   VIIcode Search - Final Refactored CSS
   适用：未搜索页 + 搜索结果页
   依赖 search.twig 外层：
   .search-page.is-idle / .search-page.is-searched
   ========================================================= */

body.product-search{
    background:#000;
    color:#fff;
    overflow-x:hidden;
}

.search-page{
    --search-bg:#000;
    --search-panel:#020202;
    --search-text:#fff;
    --search-muted:#888;
    --search-soft:#ccc;
    --search-line:rgba(255,255,255,.16);
    --search-line-soft:rgba(255,255,255,.10);
    --search-input-bg:#fff;
    --search-input-text:#222;

    width:100%;
    background:var(--search-bg);
}

.search-page,
.search-page *{
    box-sizing:border-box;
}

.search-container{
    width:min(92%,1180px);
    max-width:1180px;
    margin:0 auto;
}

.search-page .search-container > .row{
    margin:0;
}

.search-page #content{
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    margin:0 !important;
    padding:clamp(35px,5vw,65px) 0 clamp(50px,7vw,90px);
    float:none !important;
}

/* =========================================================
   未搜索 / 搜索后都不使用旧左侧筛选
   ========================================================= */

.search-page #column-left{
    display:none !important;
}

/* =========================================================
   搜索卡片 - 共用
   ========================================================= */

.search-card{
    width:100%;
    margin:0 0 clamp(35px,4vw,55px);
    padding:clamp(24px,3vw,38px);
    background:var(--search-panel);
    border:1px solid var(--search-line);
}

.search-heading{
    margin-bottom:clamp(22px,3vw,32px);
}

.search-heading h1{
    margin:0 0 7px;
    color:var(--search-text);
    font-size:clamp(23px,2.2vw,30px);
    font-weight:400;
    line-height:1.3;
}

.search-heading p{
    margin:0;
    color:var(--search-muted);
    font-size:14px;
    line-height:1.6;
}

.search-main-row{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);
    gap:clamp(16px,2vw,24px);
    width:100%;
}

.search-field{
    min-width:0;
}

.search-field label{
    display:block;
    margin:0 0 7px;
    color:var(--search-soft);
    font-size:14px;
    font-weight:400;
}

.search-page .form-control{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:44px;
    margin:0 !important;
    padding:9px 12px;
    background:var(--search-input-bg);
    border:1px solid #ddd;
    border-radius:0;
    color:var(--search-input-text);
    font-size:14px;
    box-shadow:none !important;
}

.search-page .form-control:focus{
    border-color:#888;
    outline:none;
    box-shadow:none !important;
}

.search-page select.form-control{
    cursor:pointer;
}

/* =========================================================
   搜索选项
   ========================================================= */

.search-options{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px clamp(25px,4vw,45px);
    width:100%;
    margin:clamp(18px,2vw,24px) 0 0;
}

.search-check{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0;
    color:#aaa;
    font-size:14px;
    font-weight:400;
    cursor:pointer;
}

.search-check input{
    margin:0;
}

.search-check input:disabled + span{
    opacity:.35;
}

/* =========================================================
   搜索按钮
   ========================================================= */

.search-submit{
    margin-top:clamp(22px,2.5vw,30px);
}

.search-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:clamp(130px,11vw,155px);
    height:44px;
    margin:0;
    padding:9px 26px;
    background:#fff;
    border:1px solid #fff;
    border-radius:0;
    color:#000;
    font-size:14px;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease;
}

.search-button:hover{
    background:#ddd;
    border-color:#ddd;
}

/* =========================================================
   热门搜索 - 仅未搜索状态显示
   ========================================================= */

.search-hot{
    display:flex;
    align-items:flex-start;
    width:100%;
    margin-top:clamp(24px,3vw,32px);
    padding-top:clamp(18px,2vw,24px);
    border-top:1px solid rgba(255,255,255,.12);
}

.search-hot-title{
    flex:0 0 auto;
    margin-right:clamp(20px,2.5vw,32px);
    padding-top:7px;
    color:var(--search-muted);
    font-size:13px;
    font-weight:400;
    line-height:1.4;
    white-space:nowrap;
}

.search-hot-list{
    display:flex;
    flex:1 1 auto;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
    min-width:0;
}

.search-hot-item{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:5px 13px;
    background:transparent;
    border:1px solid #444;
    border-radius:0;
    color:#aaa;
    font-size:13px;
    font-weight:400;
    line-height:1.4;
    text-decoration:none !important;
    white-space:nowrap;
    transition:color .2s ease,border-color .2s ease,background .2s ease;
}

.search-hot-item:hover{
    background:rgba(255,255,255,.06);
    border-color:#aaa;
    color:#fff;
}

/* =========================================================
   搜索结果模式：信息精简，产品优先
   ========================================================= */

.search-page.is-searched #content{
    padding:clamp(30px,4vw,50px) 0 clamp(50px,6vw,80px);
}

.search-page.is-searched .search-card{
    margin-bottom:clamp(24px,3vw,34px);
    padding:clamp(20px,2.5vw,28px);
    background:#000;
}

.search-page.is-searched .search-heading{
    margin-bottom:clamp(16px,2vw,22px);
}

.search-page.is-searched .search-heading h1{
    margin:0;
    font-size:clamp(21px,2vw,27px);
}

.search-page.is-searched .search-heading p,
.search-page.is-searched .search-category,
.search-page.is-searched .search-options,
.search-page.is-searched .search-hot{
    display:none !important;
}

.search-page.is-searched .search-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:12px;
    width:100%;
}

.search-page.is-searched .search-main-row{
    display:block;
    width:100%;
}

.search-page.is-searched .search-keyword label{
    display:none;
}

.search-page.is-searched .search-submit{
    margin:0;
}

.search-page.is-searched .search-button{
    width:auto;
    min-width:120px;
}

/* =========================================================
   搜索结果工具栏：只保留排序
   当前 filter_bar_block 顺序：
   1 网格/列表、2 对比、3 排序、4 显示数量
   ========================================================= */

.search-page.is-searched .filter-wrapper{
    width:100%;
    margin:0 0 clamp(22px,3vw,30px);
    padding:0 0 16px;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.search-page.is-searched .filter-wrapper > .row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    margin:0;
}

.search-page.is-searched .filter-wrapper > .row > :nth-child(1),
.search-page.is-searched .filter-wrapper > .row > :nth-child(2),
.search-page.is-searched .filter-wrapper > .row > :nth-child(4){
    display:none !important;
}

.search-page.is-searched .filter-wrapper > .row > :nth-child(3){
    display:block;
    width:auto !important;
    max-width:320px;
    margin:0;
    padding:0;
    float:none !important;
}

.search-page.is-searched .filter-wrapper .form-group{
    margin:0;
}

.search-page.is-searched .filter-wrapper .input-group{
    display:flex;
    align-items:stretch;
    width:100%;
    margin:0;
}

.search-page.is-searched .filter-wrapper .input-group-addon{
    display:flex;
    align-items:center;
    height:38px;
    padding:0 12px;
    background:#000;
    border:1px solid #333;
    border-right:0;
    border-radius:0;
    color:#888;
    font-size:13px;
    white-space:nowrap;
}

.search-page.is-searched .filter-wrapper select.form-control{
    width:clamp(150px,15vw,210px) !important;
    height:38px;
    padding:6px 10px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:0;
    color:#222;
    font-size:13px;
}

/* =========================================================
   商品结果
   ========================================================= */

.search-results{
    width:100%;
    color:#ccc;
}

.search-product-wrapper{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(18px,2vw,26px);
    width:100%;
    margin:0;
}

.search-product-wrapper .product-layout,
.search-product-wrapper .product-layout.product-list,
.search-product-wrapper .product-layout.product-grid{
    grid-column:auto;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
}

.search-page.is-searched .product-thumb{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:100%;
    margin:0 !important;
    padding:0 !important;
    background:#000;
    border:1px solid rgba(255,255,255,.15);
    border-radius:0;
    overflow:hidden;
    transition:border-color .2s ease;
}

.search-page.is-searched .product-thumb:hover{
    border-color:rgba(255,255,255,.42);
}

.search-page.is-searched .product-thumb .image{
    display:block !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff;
}

.search-page.is-searched .product-thumb .image a{
    display:block;
    width:100%;
}

.search-page.is-searched .product-thumb .image img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

.search-page.is-searched .product-thumb .caption{
    flex:1 1 auto;
    float:none !important;
    width:100% !important;
    min-height:92px;
    margin:0 !important;
    padding:14px 14px 12px !important;
    background:#000;
    color:#fff;
}

.search-page.is-searched .product-thumb .product-name{
    margin:0 0 8px;
    padding:0;
    font-size:clamp(14px,1.1vw,16px);
    font-weight:400;
}

.search-page.is-searched .product-thumb .product-name a{
    color:#fff !important;
    text-decoration:none;
}

.search-page.is-searched .product-thumb .product-name a:hover{
    color:#ccc !important;
}

.search-page.is-searched .product-thumb .price{
    margin:0;
    padding:0;
    color:#ddd !important;
    font-size:clamp(15px,1.2vw,17px);
    font-weight:400;
    line-height:1.5;
}

.search-page.is-searched .product-thumb .price-old{
    color:#666 !important;
    font-size:12px;
}

.search-page.is-searched .product-thumb .price-new{
    color:#fff !important;
}

/* =========================================================
   商品按钮
   ========================================================= */

.search-page.is-searched .product-button-wrapper{
    display:flex !important;
    align-items:stretch;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#000;
    border-top:1px solid rgba(255,255,255,.12);
}

.search-page.is-searched .product-button-wrapper .btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    height:42px;
    margin:0;
    padding:0 12px;
    background:#000;
    border:0;
    border-radius:0;
    color:#aaa;
    box-shadow:none;
    transition:background .2s ease,color .2s ease;
}

.search-page.is-searched .product-button-wrapper .btn-wishlist{
    flex:0 0 48px;
    width:48px;
    border-right:1px solid rgba(255,255,255,.12);
}

.search-page.is-searched .product-button-wrapper .cart{
    display:flex !important;
    flex:1 1 auto;
    background:#fff;
    color:#000 !important;
}

.search-page.is-searched .product-button-wrapper .btn-wishlist:hover{
    color:#fff;
}

.search-page.is-searched .product-button-wrapper .cart:hover{
    background:#ddd;
    color:#000 !important;
}

/* =========================================================
   Pagination
   ========================================================= */

.search-pagination{
    width:100%;
    margin-top:clamp(30px,4vw,48px);
}

.search-page .pagination{
    margin:0;
}

.search-page .pagination > li > a,
.search-page .pagination > li > span{
    background:transparent;
    border:1px solid #444;
    border-radius:0 !important;
    color:#aaa;
}

.search-page .pagination > .active > a,
.search-page .pagination > .active > span{
    background:#fff;
    border-color:#fff;
    color:#000;
}

/* =========================================================
   无结果
   ========================================================= */

.search-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:clamp(280px,30vw,400px);
    padding:clamp(30px,4vw,50px) 15px;
    text-align:center;
}

.search-empty img{
    display:block;
    width:clamp(75px,7vw,100px);
    max-width:100%;
    height:auto;
    margin:0 auto 20px;
    opacity:.8;
}

.search-empty h2{
    margin:0 0 8px;
    color:#ddd;
    font-size:clamp(17px,1.5vw,20px);
    font-weight:400;
    line-height:1.5;
}

.search-empty p{
    margin:0;
    color:#777;
    font-size:clamp(13px,1.1vw,14px);
    line-height:1.7;
}

/* =========================================================
   <=1199
   ========================================================= */

@media(max-width:1199px){
    .search-container{
        width:calc(100% - 50px);
    }

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

/* =========================================================
   <=991
   ========================================================= */

@media(max-width:991px){
    .search-container{
        width:calc(100% - 36px);
    }

    .search-page #content{
        padding:35px 0 55px;
    }

    .search-card{
        padding:28px;
    }

    .search-main-row{
        grid-template-columns:minmax(0,1.4fr) minmax(200px,.8fr);
    }

    .search-hot{
        margin-top:24px;
    }

    .search-product-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .search-page.is-searched #content{
        padding:30px 0 55px;
    }
}

/* =========================================================
   <=767
   ========================================================= */

@media(max-width:767px){
    .search-container{
        width:100%;
        padding:0 14px;
    }

    .search-page #content{
        padding:25px 0 45px;
    }

    .search-card{
        margin-bottom:30px;
        padding:22px 18px;
    }

    .search-heading{
        margin-bottom:22px;
    }

    .search-heading h1{
        font-size:clamp(21px,5.8vw,25px);
    }

    .search-main-row{
        grid-template-columns:minmax(0,1fr);
        gap:16px;
    }

    .search-options{
        gap:12px 22px;
        margin-top:18px;
    }

    .search-button{
        width:100%;
        min-width:0;
    }

    .search-hot{
        display:block;
        margin-top:22px;
        padding-top:18px;
    }

    .search-hot-title{
        margin:0 0 12px;
        padding:0;
    }

    .search-hot-list{
        gap:9px;
    }

    .search-hot-item{
        min-height:29px;
        padding:5px 11px;
        font-size:12px;
    }

    .search-page.is-searched #content{
        padding:20px 0 40px;
    }

    .search-page.is-searched .search-card{
        margin-bottom:24px;
        padding:20px 16px;
    }

    .search-page.is-searched .search-heading{
        margin-bottom:16px;
    }

    .search-page.is-searched .search-form{
        grid-template-columns:minmax(0,1fr) auto;
        gap:8px;
    }

    .search-page.is-searched .search-button{
        width:auto;
        min-width:86px;
        padding:8px 16px;
    }

    .search-page.is-searched .filter-wrapper > .row > :nth-child(3){
        width:100% !important;
        max-width:100%;
    }

    .search-page.is-searched .filter-wrapper .input-group{
        justify-content:flex-end;
    }

    .search-page.is-searched .filter-wrapper select.form-control{
        width:170px !important;
    }

    .search-product-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px 12px;
    }

    .search-empty{
        min-height:clamp(260px,70vw,330px);
    }
}

/* =========================================================
   <=508
   ========================================================= */

@media(max-width:508px){
    .search-container{
        padding:0 12px;
    }

    .search-page #content{
        padding:20px 0 35px;
    }

    .search-card{
        padding:20px 14px;
    }

    .search-page .form-control,
    .search-button{
        height:42px;
    }

    .search-hot{
        margin-top:20px;
        padding-top:16px;
    }

    .search-hot-list{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .search-hot-item{
        width:100%;
        min-width:0;
        padding:6px 5px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .search-page.is-searched .search-card{
        padding:18px 13px;
    }

    .search-page.is-searched .search-form{
        grid-template-columns:minmax(0,1fr);
    }

    .search-page.is-searched .search-button{
        width:100%;
        min-width:0;
    }

    .search-page.is-searched .filter-wrapper .input-group{
        width:100%;
    }

    .search-page.is-searched .filter-wrapper .input-group-addon{
        flex:0 0 80px;
        width:80px;
    }

    .search-page.is-searched .filter-wrapper select.form-control{
        flex:1 1 auto;
        width:auto !important;
    }

    .search-product-wrapper{
        grid-template-columns:minmax(0,1fr);
        gap:20px;
    }

    .search-page.is-searched .product-thumb{
        width:min(100%,360px) !important;
        margin:0 auto !important;
    }

    .search-empty img{
        width:75px;
    }
}

@media(max-width:380px){
    .search-hot-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}