/* List page modern: rounded red pagination + total count */

/* total count in the view-mode toolbar */
.mod_order .sortstyle .ql_totalcount {
    display: inline-block;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid #e0e0e0;
    font-size: 14px;
    color: #e1251b;
    vertical-align: middle;
    line-height: 20px;
}
.mod_order .sortstyle .ql_totalcount em {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #e1251b;
    margin-right: 2px;
}

/* pagination container */
.page_wrap .paginator.mpg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 0;
}
.page_wrap .paginator.mpg a,
.page_wrap .paginator.mpg .mpg-current,
.page_wrap .paginator.mpg .mpg-disabled,
.page_wrap .paginator.mpg .mpg-ellipsis {
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #dcdee2;
    background: #fff;
    color: #495060;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    transition: color .15s, border-color .15s, background .15s;
}
.page_wrap .paginator.mpg a:hover {
    color: #e1251b;
    border-color: #e1251b;
    background: #fff5f4;
    text-decoration: none;
}
.page_wrap .paginator.mpg .mpg-current {
    background: #e1251b;
    border-color: #e1251b;
    color: #fff;
    font-weight: 700;
    cursor: default;
}
.page_wrap .paginator.mpg .mpg-disabled {
    color: #c0c4cc;
    background: #f7f8fa;
    border-color: #eef0f2;
    cursor: not-allowed;
}
.page_wrap .paginator.mpg .mpg-ellipsis {
    border: none;
    background: transparent;
    color: #909399;
    cursor: default;
    padding: 0 2px;
    min-width: 24px;
}
.page_wrap .paginator.mpg .mpg-info {
    color: #495060;
    font-size: 14px;
    margin: 0 2px;
}
.page_wrap .paginator.mpg .mpg-jump-input {
    width: 48px;
    height: 34px;
    line-height: 32px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #495060;
    box-sizing: border-box;
    outline: none;
    margin: 0 4px;
}
.page_wrap .paginator.mpg .mpg-jump-input:focus {
    border-color: #e1251b;
}
.page_wrap .paginator.mpg .mpg-jump-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dcdee2;
    border-radius: 6px;
    background: #fff;
    color: #495060;
    font-size: 14px;
    cursor: pointer;
    margin-left: 6px;
    transition: color .15s, border-color .15s, background .15s;
}
.page_wrap .paginator.mpg .mpg-jump-btn:hover {
    color: #e1251b;
    border-color: #e1251b;
    background: #fff5f4;
}

/* promo corner marks: clipped tag ribbon at top-right, distinct color per type */
#container .link_pic i[class*="mark_"] {
    width: auto !important;
    height: auto !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    padding: 3px 10px 3px 8px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-family: "\5FAE\8F6F\96C5\9ED1", Arial !important;
    color: #fff !important;
    text-align: center !important;
    background: #ff8c00 !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    z-index: 2;
}
#container .link_pic i.qlm_hot { background: #ff8c00 !important; }
#container .link_pic i.qlm_new { background: #2b85e4 !important; }
#container .link_pic i.qlm_limit { background: #e1251b !important; }
#container .link_pic i.qlm_bargain { background: #ff5a36 !important; }
#container .link_pic i.qlm_import { background: #7e57c2 !important; }
#container .link_pic i.qlm_sole { background: #0097a7 !important; }
#container .link_pic i.qlm_direct { background: #2e9b48 !important; }

/* quantity stepper in card — picture mode */
#container .id_pic .wrap_btn .ql_qty {
    order: 1; flex: 0 0 auto;
    display: inline-flex; align-items: stretch;
    height: 32px; border: 1px solid #e1251b; border-radius: 4px; overflow: hidden; background: #fff;
}
#container .id_pic .wrap_btn .ql_qty .ql_qty_input {
    width: 32px; border: none; outline: none; text-align: center;
    font-size: 13px; color: #333; background: #fff;
}
#container .id_pic .wrap_btn .ql_qty .ql_qty_btns {
    display: flex; flex-direction: column; border-left: 1px solid #e1251b;
}
#container .id_pic .wrap_btn .ql_qty .ql_qty_btns i {
    flex: 1 1 auto; width: 18px; display: flex; align-items: center; justify-content: center;
    background: #e1251b; color: #fff; font-style: normal; font-size: 11px; line-height: 1; cursor: pointer;
}
#container .id_pic .wrap_btn .ql_qty .ql_qty_btns i:first-child { border-bottom: 1px solid #fff; }
#container .id_pic .wrap_btn .ql_qty .ql_qty_btns i:hover { background: #c81d14; }
#container .id_pic .wrap_btn a[id^="fav"].btn_compare { order: 4; }

/* quantity stepper — list mode */
#container .id_list .wrap_btn .ql_qty {
    display: flex; align-items: stretch; height: 30px;
    border: 1px solid #e1251b; border-radius: 4px; overflow: hidden; background: #fff;
}
#container .id_list .wrap_btn .ql_qty .ql_qty_input {
    flex: 1 1 auto; min-width: 0; border: none; outline: none;
    text-align: center; font-size: 13px; color: #333; background: #fff;
}
#container .id_list .wrap_btn .ql_qty .ql_qty_btns {
    display: flex; flex-direction: column; border-left: 1px solid #e1251b;
}
#container .id_list .wrap_btn .ql_qty .ql_qty_btns i {
    width: 22px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    background: #e1251b; color: #fff; font-style: normal; font-size: 11px; line-height: 1; cursor: pointer;
}
#container .id_list .wrap_btn .ql_qty .ql_qty_btns i:first-child { border-bottom: 1px solid #fff; }
#container .id_list .wrap_btn .ql_qty .ql_qty_btns i:hover { background: #c81d14; }

/* ===== hover-reveal action bar (picture mode), like qlbuy ===== */
#container .id_pic li.item_list { position: relative; }
#container .id_pic li.item_list > .wrap_btn {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0; padding: 8px 10px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 -3px 12px rgba(0,0,0,.10);
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    z-index: 6;
}
#container .id_pic li.item_list:hover > .wrap_btn {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* ===== album thumbnail strip with left/right paging arrows ===== */
#container .id_pic li.item_list .ql_thumbwrap {
    display: flex; justify-content: center; align-items: center;
    gap: 4px; padding: 7px 6px 2px;
}
#container .id_pic li.item_list .ql_tview {
    width: 190px; overflow: hidden; position: relative;
}
#container .id_pic li.item_list .ql_tview::-webkit-scrollbar { display: none; }
#container .id_pic li.item_list .ql_thumbs {
    display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
    width: max-content;
}
#container .id_pic li.item_list .ql_thumbs img {
    width: 34px; height: 34px; object-fit: cover;
    border: 1px solid #e2e2e2; border-radius: 3px;
    padding: 1px; background: #fff; cursor: pointer;
    box-sizing: border-box; flex: 0 0 auto;
    transition: border-color .15s;
}
#container .id_pic li.item_list .ql_thumbs img.cur,
#container .id_pic li.item_list .ql_thumbs img:hover { border-color: #e1251b; }
#container .id_pic li.item_list .ql_tnav {
    display: none; width: 18px; height: 34px; flex: 0 0 auto;
    align-items: center; justify-content: center;
    background: #f2f2f2; border: 1px solid #d9d9d9; border-radius: 3px;
    color: #666; font-size: 15px; line-height: 1; cursor: pointer;
    user-select: none; transition: background .15s, color .15s;
}
#container .id_pic li.item_list.ql_overflow .ql_tnav { display: flex; }
#container .id_pic li.item_list .ql_tnav:hover { background: #e1251b; color: #fff; border-color: #e1251b; }
#container .id_pic li.item_list .ql_tnav.ql_off { opacity: .4; cursor: default; background: #f2f2f2; color: #999; }

/* touch / no-hover devices: keep action bar accessible */
@media (hover: none) {
    #container .id_pic li.item_list > .wrap_btn {
        position: static; opacity: 1; transform: none; pointer-events: auto;
        box-shadow: none; padding: 6px 4px;
    }
}