@charset "utf-8";
/* ============================================================
   Product list (ThirdProductList.aspx / /list/) modern e-commerce skin
   Scope: this stylesheet is loaded ONLY on the list page.
   Visual/layout only - no DOM, ids, classes, names, JS or data changes.
   Palette: Qilecai red #e1251b, neutral greys, white cards.
   ============================================================ */

/* ---------- page ground ---------- */
body { background: #f5f5f5; }
#container.main { text-align: left; }
#container .content { background: transparent; }
#container .sidebar { background: transparent; }

/* ---------- breadcrumb ---------- */
#container .crumbs {
    height: auto; line-height: 20px; padding: 10px 2px;
    font-size: 12px; color: #999; border: none; background: none;
}
#container .crumbs a { color: #666; }
#container .crumbs a:hover { color: #e1251b; text-decoration: none; }
#container .crumbs span { color: #999; }

/* ============================================================
   shared card / title primitives
   ============================================================ */
#container .list_topcommend,
#container .catschoose,
#container .mod_price,
#container .mod_order,
#container .sidebar .mod_catelist,
#container .sidebar .mod_aider,
#container .sidebar .mod_blue {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

/* section title with red accent bar */
#container .list_topcommend .tit {
    position: relative; height: 22px; line-height: 22px;
    margin: 0; padding: 14px 16px 6px 26px;
    font-size: 16px; font-weight: 700; color: #333;
}
#container .list_topcommend .tit:before,
#container .sidebar .mod_aider .hd h3:before {
    content: ""; position: absolute; left: 16px; top: 17px;
    width: 4px; height: 16px; border-radius: 2px; background: #e1251b;
}

/* ============================================================
   hot-sell recommendation row
   ============================================================ */
#container .list_topcommend {
    padding: 0 0 14px; margin-bottom: 12px; overflow: hidden;
}
#container .list_topcommend .item {
    float: left; width: 220px; margin: 8px 0 0 14px;
    border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
#container .list_topcommend .item:hover {
    border-color: #f3bcba; box-shadow: 0 6px 16px rgba(225,37,27,.12); transform: translateY(-2px);
}
#container .list_topcommend .litpic {
    width: 100%; height: 150px; padding: 8px; box-sizing: border-box;
    text-align: center; background: #fff;
}
#container .list_topcommend .litpic .img_wrap { display: block; width: 100%; height: 100%; }
#container .list_topcommend .litpic img {
    max-width: 100%; max-height: 100%; width: auto !important; height: auto !important;
    vertical-align: middle; display: inline-block;
}
#container .list_topcommend .info { padding: 0 12px 10px; }
#container .list_topcommend .info .name { height: 36px; line-height: 18px; margin: 0 0 4px; overflow: hidden; }
#container .list_topcommend .info .name a { font-size: 13px; color: #333; }
#container .list_topcommend .info .name a:hover { color: #e1251b; }
#container .list_topcommend .info .hot { display: none; }
#container .list_topcommend .info .price_wrap {
    font-size: 12px; color: #999; margin: 0 0 8px;
}
#container .list_topcommend .info .price_wrap .i_price { color: #e1251b; font-size: 16px; font-weight: 700; }
#container .list_topcommend .info .wrap_btn { margin: 0; }

/* ============================================================
   filter area
   ============================================================ */
#container .ft_cond { margin-bottom: 12px; }
#container .catschoose {
    padding: 4px 16px 10px; border-radius: 8px; overflow: hidden;
}
#container .catschoose ul { margin: 0; }
#container .catschoose ul.operation_area > li { display: block; margin: 0; }
#container .catschoose dl {
    border-bottom: 1px solid #f2f2f2;
    padding: 9px 0; line-height: 24px; margin: 0;
}
#container .catschoose ul li dl:last-child { border-bottom: none; }
#container .catschoose dl dt {
    float: left; width: 70px; padding: 0 12px 0 0;
    text-align: right; color: #999; font-size: 13px;
}
#container .catschoose dl dd {
    float: none; margin-left: 82px; width: auto; padding: 0;
}
#container .catschoose dl dd dl { border: none; padding: 0; }
#container .catschoose dl dd dl dt,
#container .catschoose dl dd dl dd { float: none; width: auto; display: inline; padding: 0; white-spacing: normal; }
#container .catschoose dl dd dl dd { margin: 0; }

/* filter option chips */
#container .catschoose dl a {
    display: inline-block;
    padding: 2px 10px; margin: 2px 4px 2px 0;
    font-size: 13px; color: #666; background: #fff;
    border: 1px solid transparent; border-radius: 4px;
    line-height: 20px; vertical-align: middle;
}
#container .catschoose dl a:hover {
    color: #e1251b; background: #fff5f5; border-color: #f3c4c2; text-decoration: none;
}
#container .catschoose dl a.current,
#container .catschoose dl a.current:link,
#container .catschoose dl a.current:visited,
#container .catschoose dl a.current:hover {
    color: #fff; background: #e1251b; border-color: #e1251b; text-decoration: none;
}

/* brand logos */
#container .catschoose .brand-cell {
    width: 95px; height: 48px; padding: 0; margin: 3px;
    border: 1px solid #eee; border-radius: 6px; box-sizing: border-box;
    text-align: center; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
#container .catschoose .brand-cell:hover { border-color: #f3c4c2; }
#container .catschoose .brand-cell img.brand-logo {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; vertical-align: middle;
}
#container .catschoose .brand-cell .brand-mash {
    display: block; font-size: 12px; color: #666; line-height: 1.2;
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#container .catschoose .brand-cell.all-cell { line-height: 34px; color: #666; }
#container .catschoose .brand-cell.current,
#container .catschoose .brand-cell.current .brand-mash {
    border-color: #e1251b; color: #e1251b; background: #fff5f5;
}

/* cascading brand/type/model selects */
#container .operation_area select {
    width: 150px; height: 28px; margin: 0 6px 4px 0;
    border: 1px solid #d9d9d9; border-radius: 4px; padding: 2px 4px;
    font-size: 13px; color: #333; background: #fff;
}

/* selected chips row */
#container .ft_cond .selected_area {
    background: #fff8f8; border: 1px solid #fde2e1; border-radius: 6px;
    padding: 8px 12px; margin: 8px 0;
}
#container .ft_cond .selected_area dt { float: left; width: auto; color: #e1251b; padding-right: 10px; text-align: left; }
#container .ft_cond .selected_area dd { margin-left: 82px; width: auto; }
#container .ft_cond .selected_area .selected li { display: inline-block; padding: 0 4px; float: none; }
#container .ft_cond .selected_area .selected a {
    color: #666; font-size: 13px; background: #fff; border: 1px solid #eee;
    border-radius: 4px; padding: 1px 8px;
}
#container .ft_cond .selected_area .selected a i {
    background: none; width: auto; height: auto; margin: 0 2px 0 0;
}
#container .ft_cond .selected_area .selected a:hover { color: #e1251b; border-color: #f3c4c2; }

/* expand / collapse bar */
#container .wrap_close {
    border: none; background: #fff; padding: 6px 0 2px; text-align: center;
}
#container .wrap_close p { border: none; margin: 0; position: static; }
#container .wrap_close p .btn_click {
    position: static; display: inline-block; width: auto; height: auto; line-height: 22px;
    background: none; color: #e1251b; font-size: 13px; padding: 2px 12px;
}
#container .wrap_close p .btn_click b {
    background: none; display: inline-block; width: 0; height: 0; margin: 0 4px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 6px solid #e1251b; vertical-align: middle;
}
#container .wrap_close.status_up p .btn_click b { border-top: none; border-bottom: 6px solid #e1251b; }
#container .wrap_close p .btn_click .m { display: none; }

/* ============================================================
   price filter
   ============================================================ */
#container .mod_price {
    height: auto; padding: 10px 16px; margin: 0 0 12px;
    border-top: 1px solid #ececec;
}
#container .mod_price dl { float: none; margin: 0; }
#container .mod_price dt,
#container .mod_price dd { float: left; }
#container .mod_price dt { color: #999; font-size: 13px; padding-right: 12px; line-height: 26px; }
#container .mod_price dd a {
    display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0;
    font-size: 13px; color: #666; border: 1px solid transparent; border-radius: 4px; line-height: 20px;
}
#container .mod_price dd a:hover { color: #e1251b; background: #fff5f5; border-color: #f3c4c2; text-decoration: none; }
#container .mod_price .split { display: none; }
#container #price_panel.custom {
    display: inline-block !important; padding: 0 0 0 8px; vertical-align: middle;
}
#container #price_panel .init span { color: #999; }
#container #price_panel .init input {
    width: 70px; height: 26px; margin: 0 4px; padding: 0 6px;
    border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px;
}
#container #price_panel .foused { display: inline-block; }
#container #price_panel .foused p { display: inline; }
#container #price_panel .foused .btn_common,
#container #price_panel .foused .btn_strong {
    position: static; display: inline-block; width: auto; padding: 4px 12px; margin-left: 4px;
    border-radius: 4px; font-size: 13px;
}

/* ============================================================
   order / toolbar
   ============================================================ */
#container .mod_order {
    display: flex; align-items: center; flex-wrap: wrap;
    padding: 8px 16px; margin-bottom: 12px;
}
#container .mod_order > span { float: none; display: flex; align-items: center; }
#container .mod_order strong { font-weight: 400; color: #999; font-size: 13px; padding-right: 8px; }
#container .mod_order .sortstyle { margin-right: 24px; }
#container .mod_order .orderlist { flex: 1; }
#container .mod_order #spstock { float: none; }
#container .mod_order #spstock a {
    font-size: 13px; color: #666; border: 1px solid #eee; border-radius: 4px; padding: 3px 10px;
}
#container .mod_order #spstock a:hover { color: #e1251b; border-color: #f3c4c2; text-decoration: none; }

/* view-mode toggle */
#container .viewmode { display: inline-flex; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; }
#container .viewmode a {
    display: inline-block; height: 26px; line-height: 26px; padding: 0 10px;
    font-size: 13px; color: #666; background: #fff;
}
#container .viewmode a b { display: none; }
#container .viewmode a:first-child { border-right: 1px solid #d9d9d9; }
#container .viewmode a:hover { color: #e1251b; text-decoration: none; }
#container .viewmode.status_pic .icon_pic,
#container .viewmode.status_list .icon_list { color: #e1251b; background: #fff5f5; }

/* sort links - bordered chips like ZKH */
#container .orderlist .con_list { display: inline-flex; align-items: center; }
#container .orderlist .con_list a {
    position: relative; display: inline-block; height: auto; line-height: 24px;
    padding: 3px 12px; margin: 0 6px 0 0; font-size: 13px; color: #666;
    background: #fff; border: 1px solid #e3e3e3; border-radius: 4px;
}
#container .orderlist .con_list a b { display: none; }
#container .orderlist .con_list a:hover { color: #e1251b; border-color: #f3c4c2; text-decoration: none; }
/* price gets up/down glyph, sales gets up glyph (grey) */
#container .orderlist .con_list a.order_asc:after,
#container .orderlist .con_list a.order_desc:after {
    content: "\21C5"; display: inline-block; margin-left: 4px;
    color: #999; font-size: 11px; vertical-align: middle;
}
#container .orderlist .con_list a.order_up:has(b):after {
    content: "\2191"; display: inline-block; margin-left: 4px;
    color: #999; font-size: 11px; vertical-align: middle;
}

/* ============================================================
   goods grid (picture mode)
   ============================================================ */
#container .mod_goods.id_pic ul.list_goods {
    display: flex; flex-wrap: wrap;
    margin: 0 -6px; padding: 0; list-style: none; overflow: visible;
}
#container .mod_goods.id_pic .item_list {
    box-sizing: border-box;
    flex: 0 0 auto; width: calc(16.666% - 12px); margin: 0 6px 14px;
    float: none; height: auto; padding: 0;
    background: #fff; border: 1px solid transparent; border-radius: 6px;
    overflow: hidden; position: relative;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
body.wrap_1280 #container .mod_goods.id_pic .item_list { width: calc(20% - 12px); }
body:not(.wrap_1600):not(.wrap_1280) #container .mod_goods.id_pic .item_list { width: calc(25% - 12px); }

#container .mod_goods.id_pic .item_list:hover {
    border-color: #f3bcba; box-shadow: 0 8px 20px rgba(225,37,27,.14); transform: translateY(-2px);
}

/* product picture area */
#container .id_pic .link_pic {
    display: block; width: 100%; aspect-ratio: 1 / 1;
    height: auto; padding: 10px; margin: 0; line-height: normal;
    text-align: center; box-sizing: border-box; background: #fff;
}
#container .id_pic .link_pic img {
    display: inline-block; width: auto; height: auto;
    max-width: 100%; max-height: 100%; vertical-align: middle;
}
/* promo corner mark */
#container .id_pic .link_pic i[class*="mark_"] {
    position: absolute; top: 10px; left: 0;
    font-style: normal; font-size: 12px; color: #fff;
    background: #e1251b; padding: 2px 7px; border-radius: 0 4px 4px 0;
    line-height: 16px;
}

/* info */
#container .id_pic .wrap_info { padding: 0 12px; width: auto; float: none; }
#container .id_pic .link_name {
    height: 40px; line-height: 20px; margin: 0 0 4px; overflow: hidden; width: 100%;
}
#container .id_pic .link_name a {
    font-size: 13px; font-weight: 400; color: #333;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#container .id_pic .link_name a:hover { color: #e1251b; }
#container .id_pic .wrap_info .hot {
    height: 18px; line-height: 18px; margin: 0; overflow: hidden;
    font-size: 12px; color: #ff7a00; white-space: nowrap; text-overflow: ellipsis;
}
/* pack/spec selector */
#container .id_pic .comment { margin: 4px 0 0; }
#container .id_pic .cont {
    display: flex; flex-wrap: wrap; width: 100%; height: auto; float: none; padding: 0;
}
#container .id_pic .cont li {
    float: none; width: auto; min-width: 30px; height: 22px; line-height: 22px;
    margin: 0 5px 5px 0; padding: 0 6px; text-align: center; cursor: pointer;
    font-size: 12px; border-radius: 4px; background: #f7f7f7; border: 1px solid #eee; color: #666;
}
#container .id_pic .cont li.def { border-color: #eee; }
#container .id_pic .cont li.def:hover { border-color: #f3c4c2; color: #e1251b; }
#container .id_pic .cont li.cur { background: #fff5f5; border-color: #e1251b; color: #e1251b; }

/* price */
#container .id_pic .wrap_price {
    width: auto; float: none; padding: 4px 12px 2px;
}
#container .id_pic .price_market {
    display: block; font-size: 12px; color: #999; margin: 0; line-height: 18px;
}
#container .id_pic .price_market label { font-weight: 400; }
#container .id_pic .price_icson {
    font-size: 12px; color: #999; margin: 0; line-height: 26px;
}
#container .id_pic .price_icson strong {
    color: #e1251b; font-size: 21px; font-weight: 700;
}

/* gift corner */
#container .id_pic .wrap_attr {
    position: absolute; top: 8px; right: 8px; left: auto; height: auto; margin: 0; clear: none;
}
#container .id_pic .wrap_attr .attr { width: 18px; height: 18px; margin: 0; float: none; display: block; }
#container .id_pic .wrap_attr .attr p {
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: #ff7a00; border-radius: 4px; color: #fff; font-size: 12px;
}

/* actions: heart | add-to-cart(red) | compare(white/red) */
#container .id_pic .wrap_btn {
    width: auto; float: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    margin: 6px 0 0; padding: 8px 10px 10px;
}
#container .id_pic .wrap_btn .btn_strong {
    order: 2; flex: 1 1 auto; width: auto;
    display: block; text-align: center; height: 32px; line-height: 32px;
    background: #e1251b; color: #fff; border-radius: 4px; font-size: 13px;
    white-space: nowrap; overflow: hidden;
}
#container .id_pic .wrap_btn .btn_strong:hover { background: #c81d14; text-decoration: none; }
/* favorite small square with heart glyph */
#container .id_pic .wrap_btn a[id^="fav"].btn_compare {
    order: 1; flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 4px;
    text-align: center; position: relative;
}
#container .id_pic .wrap_btn a[id^="fav"].btn_compare span { display: none; }
#container .id_pic .wrap_btn a[id^="fav"].btn_compare:before {
    content: "\2661"; color: #999; font-size: 17px; line-height: 30px;
}
#container .id_pic .wrap_btn a[id^="fav"].btn_compare:hover { border-color: #f3c4c2; }
#container .id_pic .wrap_btn a[id^="fav"].btn_compare:hover:before { content: "\2665"; color: #e1251b; }
/* compare = white with red border/text */
#container .id_pic .wrap_btn a[id^="cmp"].btn_compare {
    order: 3; flex: 0 0 46px; width: auto; height: 32px; padding: 0 6px;
    background: #fff; border: 1px solid #f09a96; border-radius: 4px;
    color: #e1251b; font-size: 12px; line-height: 30px; text-align: center;
}
#container .id_pic .wrap_btn a[id^="cmp"].btn_compare span { display: inline; }
#container .id_pic .wrap_btn a[id^="cmp"].btn_compare:hover { background: #fff5f5; border-color: #e1251b; text-decoration: none; }
#container .id_pic .clr { display: none; }

/* ============================================================
   goods list (list mode)
   ============================================================ */
#container .mod_goods.id_list ul.list_goods { padding: 0; list-style: none; }
#container .mod_goods.id_list .item_list {
    display: flex; align-items: stretch;
    float: none; width: auto; height: auto; margin: 0 0 12px; padding: 16px;
    background: #fff; border: 1px solid #ececec; border-radius: 8px;
    transition: box-shadow .2s, border-color .2s;
}
#container .mod_goods.id_list .item_list:hover {
    border-color: #f3bcba; box-shadow: 0 6px 16px rgba(225,37,27,.10);
}
#container .id_list .link_pic {
    flex: 0 0 150px; width: 150px; height: 150px; float: none;
    margin: 0; padding: 8px; line-height: 150px; text-align: center; box-sizing: border-box;
}
#container .id_list .link_pic img { max-width: 134px; max-height: 134px; width: auto; height: auto; vertical-align: middle; }
#container .id_list .link_pic i[class*="mark_"] {
    position: absolute; top: 8px; left: 0; font-style: normal; font-size: 12px;
    color: #fff; background: #e1251b; padding: 2px 7px; border-radius: 0 4px 4px 0;
}
#container .id_list .wrap_info {
    flex: 1 1 auto; float: none; width: auto; margin: 0; padding: 0 18px;
}
#container .id_list .link_name { height: auto; margin: 0 0 6px; }
#container .id_list .link_name a { font-size: 15px; font-weight: 500; color: #333; }
#container .id_list .link_name a:hover { color: #e1251b; }
#container .id_list .wrap_info .hot { height: auto; font-size: 13px; color: #ff7a00; margin: 0 0 6px; overflow: hidden; }
#container .id_list .cont { display: flex; flex-wrap: wrap; width: 100%; height: auto; float: none; }
#container .id_list .cont li {
    float: none; width: auto; min-width: 34px; height: 24px; line-height: 24px;
    margin: 0 6px 6px 0; padding: 0 8px; text-align: center; cursor: pointer;
    font-size: 12px; border-radius: 4px; background: #f7f7f7; border: 1px solid #eee; color: #666;
}
#container .id_list .cont li.cur { background: #fff5f5; border-color: #e1251b; color: #e1251b; }
#container .id_list .wrap_price {
    flex: 0 0 150px; float: none; width: auto; margin: 0; padding: 10px 0;
    text-align: center; display: flex; flex-direction: column; justify-content: center;
}
#container .id_list .price_market { font-size: 12px; color: #999; margin: 0 0 6px; }
#container .id_list .price_icson { font-size: 12px; color: #999; margin: 0; }
#container .id_list .price_icson strong { display: block; color: #e1251b; font-size: 22px; font-weight: 700; }
#container .id_list .wrap_attr {
    position: absolute; top: 10px; right: 10px; left: auto; clear: none; height: auto; margin: 0;
}
#container .id_list .wrap_attr .attr p {
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: #ff7a00; border-radius: 4px; color: #fff; font-size: 12px;
}
#container .id_list .wrap_btn {
    flex: 0 0 120px; float: none; width: auto; margin: 0; padding: 10px 0;
    text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
#container .id_list .wrap_btn .btn_strong {
    display: block; height: 34px; line-height: 34px; text-align: center;
    background: #e1251b; color: #fff; border-radius: 5px; font-size: 14px;
}
#container .id_list .wrap_btn .btn_strong:hover { background: #c81d14; text-decoration: none; }
#container .id_list .wrap_btn .btn_compare {
    display: block; height: 26px; line-height: 26px; padding: 0;
    color: #666; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; font-size: 12px;
}
#container .id_list .wrap_btn .btn_compare:hover { color: #e1251b; border-color: #f3c4c2; text-decoration: none; }
#container .id_list .clr { display: none; }

/* ============================================================
   pagination
   ============================================================ */
#container .page_wrap { padding: 10px 0 20px; }
#container .paginator { text-align: center; }
#container .paginator a,
#container .paginator span,
#container .paginator b {
    display: inline-block; min-width: 32px; height: 32px; line-height: 30px;
    margin: 0 3px; padding: 0 8px; text-align: center; vertical-align: middle;
    background: #fff; border: 1px solid #e3e3e3; border-radius: 4px;
    font-size: 13px; color: #666; font-weight: 400; box-sizing: border-box;
}
#container .paginator a:hover { color: #e1251b; border-color: #e1251b; text-decoration: none; }
#container .paginator .current,
#container .paginator span.current {
    background: #e1251b; border-color: #e1251b; color: #fff;
}
#container .paginator .disabled,
#container .paginator span.text { color: #bbb; background: #fafafa; }

/* ============================================================
   sidebar
   ============================================================ */
#container .sidebar .mod_catelist,
#container .sidebar .mod_aider { margin-bottom: 12px; overflow: hidden; }

/* category tree */
#container .sidebar .mod_catelist { border-radius: 8px; }
#container .mod_catelist .catelist_item { border-bottom: 1px solid #f2f2f2; overflow: hidden; }
#container .mod_catelist .catelist_item:last-child { border-bottom: none; }
#container .mod_catelist .catelist_item .item_hd {
    height: auto; line-height: normal; background: #fff;
    padding: 10px 12px; cursor: pointer; position: relative;
}
#container .mod_catelist .catelist_item .item_hd h3 { float: none; width: auto; margin: 0; }
#container .mod_catelist .catelist_item .item_hd h3 a {
    font-size: 14px; color: #333; font-family: inherit; display: block;
    padding-right: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#container .mod_catelist .catelist_item .item_hd:hover h3 a { color: #e1251b; }
#container .mod_catelist .catelist_item .item_hd_current h3 a,
#container .mod_catelist .catelist_item .item_hd_current:hover h3 a { color: #e1251b; font-weight: 700; }
/* modern css arrow replaces old sprite icon */
#container .mod_catelist .catelist_item .icon_state {
    position: absolute; right: 12px; top: 50%; width: 0; height: 0; margin: 0;
    background: none; float: none;
    border-left: 5px solid #bbb; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
#container .mod_catelist .catelist_item_unfold .item_hd .icon_state {
    background: none; border: none;
    border-top: 5px solid #e1251b; border-left: 4px solid transparent; border-right: 4px solid transparent;
}
#container .mod_catelist .catelist_item .item_bd {
    display: none; padding: 2px 12px 10px;
}
#container .mod_catelist .catelist_item_unfold .item_bd { display: block; }
#container .mod_catelist .catelist_item .item_bd a {
    float: none; display: block; width: auto; height: auto; line-height: 24px;
    margin: 2px 0; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #666;
}
#container .mod_catelist .catelist_item .item_bd a span {
    float: none; max-width: 100%; width: auto; height: auto; padding: 0; margin: 0;
    white-space: normal;
}
#container .mod_catelist .catelist_item .item_bd a:hover { color: #e1251b; background: #fff5f5; text-decoration: none; }
#container .mod_catelist .catelist_item .item_bd a.current,
#container .mod_catelist .catelist_item .item_bd a.current span {
    background: #e1251b; color: #fff; text-decoration: none;
}
#container .mod_catelist .catelist_item .item_bd a.item_hd_current { color: #e1251b; }

/* old blue side block */
#container .sidebar .mod_blue { background: #fff; }
#container .sidebar .mod_blue .hd { background: #fafafa; border-bottom: 1px solid #f2f2f2; }

/* hot rank */
#container .sidebar .id_sameprice .hd { padding: 12px 14px 6px; border-bottom: 1px solid #f2f2f2; }
#container .sidebar .id_sameprice .hd h3 {
    position: relative; margin: 0; font-size: 15px; color: #333; padding-left: 10px;
}
#container .sidebar .mod_aider .hd h3:before { top: 13px; left: 14px; }
#container .sidebar .id_sameprice .bd { padding: 8px 12px 12px; }
#container .id_sameprice ul.list_pic_left li {
    display: flex; align-items: center; padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0; position: relative;
}
#container .id_sameprice ul.list_pic_left li:last-child { border-bottom: none; }
#container .id_sameprice .aid {
    flex: 0 0 22px; width: 22px; height: 22px; line-height: 22px;
    text-align: center; border-radius: 4px; font-size: 12px; font-weight: 700;
    background: #eee; color: #999; margin-right: 8px;
}
#container .id_sameprice li:nth-child(1) .aid { background: #e1251b; color: #fff; }
#container .id_sameprice li:nth-child(2) .aid { background: #ff6a00; color: #fff; }
#container .id_sameprice li:nth-child(3) .aid { background: #ffa726; color: #fff; }
#container .id_sameprice .img {
    flex: 0 0 56px; width: 56px; height: 56px; margin-right: 8px; display: block;
}
#container .id_sameprice .img img { width: 56px; height: 56px; object-fit: contain; }
#container .id_sameprice .link_info { flex: 1; min-width: 0; }
#container .id_sameprice .link_info .name { display: block; font-size: 13px; color: #333; line-height: 18px; margin-bottom: 3px; }
#container .id_sameprice .link_info a:hover .name { color: #e1251b; }
#container .id_sameprice .link_info .price,
#container .id_sameprice .link_info .strong { font-size: 14px; color: #e1251b; font-weight: 700; }

/* recent / visited */
#container .sidebar #recent .hd,
#container .sidebar #visitList .hd { padding: 12px 14px 6px; border-bottom: 1px solid #f2f2f2; }
#container .sidebar #recent .hd h3,
#container .sidebar #visitList .hd h3 { margin: 0; font-size: 15px; color: #333; }
#container .sidebar #recent .bd { padding: 10px 12px; }
#container .sidebar #recent .iloading { color: #bbb; font-size: 12px; padding: 6px 0; }

/* ===== horizontal category bar (qlbuy baojia style) ===== */
#container .ql_catebar {
    background: #fff; border: 1px solid #ececec; border-radius: 8px;
    margin: 0 0 14px; padding: 2px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
#container .ql_catebar .ql_catebar_row {
    display: flex; align-items: flex-start;
    padding: 9px 0; border-bottom: 1px dashed #eee;
}
#container .ql_catebar .ql_catebar_row:last-child { border-bottom: none; }
#container .ql_catebar .ql_catebar_lbl {
    flex: 0 0 52px; color: #e1251b; font-size: 13px; line-height: 24px; font-weight: 700;
}
#container .ql_catebar .ql_catebar_opts {
    flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
#container .ql_catebar .ql_catebar_tag {
    display: inline-block; padding: 3px 11px; height: auto; line-height: 20px;
    color: #333; font-size: 13px; background: #fff; border: 1px solid transparent; border-radius: 4px;
    text-decoration: none; white-space: nowrap;
}
#container .ql_catebar .ql_catebar_tag:hover { color: #e1251b; background: #fff5f5; text-decoration: none; }
#container .ql_catebar .ql_catebar_tag.current {
    color: #fff; background: #e1251b; border-color: #e1251b;
}
#container .ql_catebar .ql_catebar_tag.current:hover { color: #fff; background: #c81d14; }
/* ===== 布局：隐藏左侧栏，内容区占满 ===== */
#container.main .sidebar { display: none !important; }
#container.main .content { float: none !important; width: auto !important; }

/* ===== 底部：本周热销 / 最近浏览（横向商品卡） ===== */
#container .ql_bottombar {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin: 0 0 14px;
    overflow: hidden;
}
#container .ql_bottombar_hd { padding: 14px 16px 10px; }
#container .ql_bottombar_hd h3 { margin: 0; font-size: 17px; font-weight: 700; color: #222; }
#container .ql_bottombar_bd { padding: 0 10px 6px; }
#container .ql_bottomgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
#container .ql_bottomcard {
    width: calc(16.666% - 12px);
    margin: 0 6px 12px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
#container .ql_bottomcard:hover {
    border-color: #f3bcba;
    box-shadow: 0 4px 12px rgba(225,37,27,.10);
    transform: translateY(-2px);
}
#container .ql_bc_pic { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
#container .ql_bc_pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
#container .ql_bc_name { margin: 8px 0 6px; height: 36px; line-height: 18px; overflow: hidden; }
#container .ql_bc_name a { font-size: 13px; color: #333; }
#container .ql_bc_name a:hover { color: #e1251b; }
#container .ql_bc_price { margin: 0; }
#container .ql_bc_strong { color: #e1251b; font-size: 18px; font-weight: 700; }

/* 底部最近浏览：jdRecent 生成 li 重排为卡片 */
#bottomRecentGrid .ql_br_loading { color: #bbb; font-size: 13px; padding: 10px 6px; list-style: none; width: auto; }
#bottomRecentGrid li:not(.ql_br_loading) {
    width: calc(16.666% - 12px);
    margin: 0 6px 12px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
#bottomRecentGrid li:not(.ql_br_loading):hover {
    border-color: #f3bcba;
    box-shadow: 0 4px 12px rgba(225,37,27,.10);
    transform: translateY(-2px);
}
#bottomRecentGrid li a.img { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
#bottomRecentGrid li a.img img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
#bottomRecentGrid li .link_info { display: flex; flex-direction: column; margin-top: 8px; min-width: 0; }
#bottomRecentGrid li .link_info .name {
    font-size: 13px;
    color: #333;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#bottomRecentGrid li .link_info a:hover .name { color: #e1251b; }
#bottomRecentGrid li .link_info .price { color: #e1251b; font-size: 18px; font-weight: 700; margin-top: 6px; }
/* ===== 热卖商品推荐：横向轮播 ===== */
#container .ql_hotcarousel {
    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin: 0 0 14px;
    padding: 12px 40px;
    box-sizing: border-box;
    overflow: hidden;
}
#container .ql_hc_flag {
    position: absolute; left: 0; top: 0;
    width: 32px; height: 100%;
    background: #e1251b; color: #fff;
    writing-mode: vertical-rl;
    font-size: 14px; font-weight: 700; letter-spacing: 3px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
#container .ql_hc_flag::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    border-width: 7px; border-style: solid;
    border-color: transparent transparent #fff transparent;
}
#container .ql_hc_arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 54px;
    background: rgba(0,0,0,.22);
    z-index: 3; text-decoration: none;
}
#container .ql_hc_arrow::before {
    content: ""; position: absolute; top: 50%;
    border: 9px solid transparent;
}
#container .ql_hc_prev { left: 32px; border-radius: 0 6px 6px 0; }
#container .ql_hc_next { right: 0; border-radius: 6px 0 0 6px; }
#container .ql_hc_prev::before { border-right-color: #fff; margin: -9px 0 0 -5px; }
#container .ql_hc_next::before { border-left-color: #fff; margin: -9px 0 0 -13px; }
#container .ql_hc_arrow:hover { background: rgba(225,37,27,.85); }
#container .ql_hc_viewport { overflow: hidden; }
#container .ql_hc_track { list-style: none; margin: 0; padding: 0; display: flex; }
#container .ql_hc_card { flex: 0 0 auto; box-sizing: border-box; padding: 6px 8px; display: flex; align-items: center; }
#container .ql_hc_pic { flex: 0 0 88px; width: 88px; height: 88px; display: block; }
#container .ql_hc_pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
#container .ql_hc_info { flex: 1 1 auto; min-width: 0; padding-left: 8px; display: flex; flex-direction: column; }
#container .ql_hc_name {
    font-size: 13px; color: #333; line-height: 18px; height: 36px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#container .ql_hc_name:hover { color: #e1251b; }
#container .ql_hc_price { color: #e1251b; font-size: 17px; font-weight: 700; margin: 4px 0; }
#container .ql_hc_buy {
    align-self: flex-start; background: #e1251b; color: #fff;
    font-size: 13px; padding: 5px 14px; border-radius: 4px;
}
#container .ql_hc_buy:hover { background: #c81d14; color: #fff; }

/* ===== 分类导航：品牌 logo 图片 ===== */
#container .ql_catebar_logo {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; min-width: 88px;
    padding: 2px 8px; margin: 2px 4px;
    border: 1px solid #eee; border-radius: 4px; vertical-align: middle;
}
#container .ql_catebar_logo img { max-width: 84px; max-height: 34px; object-fit: contain; }
#container .ql_catebar_logo:hover { border-color: #f3bcba; text-decoration: none; }
#container .ql_catebar_logo.current { border-color: #e1251b; box-shadow: inset 0 0 0 1px #e1251b; }

/* ===== 底部卡片：收藏/加购/对比 图标按钮 ===== */
#container .ql_bc_btn { display: flex; align-items: center; margin-top: 8px; width: 100%; }
#container .ql_bc_btn a {
    display: flex; align-items: center; justify-content: center;
    height: 26px; border-radius: 4px; font-size: 12px; text-decoration: none;
}
#container .ql_bc_btn a[id^="fav"],
#container .ql_bc_btn a[id^="cmp"] {
    flex: 0 0 30px; width: 30px;
    background: #fff; border: 1px solid #e1251b; color: #e1251b;
}
#container .ql_bc_btn a[id^="fav"] span,
#container .ql_bc_btn a[id^="cmp"] span { display: none; }
#container .ql_bc_btn a[id^="fav"]::before { content: "\2661"; font-size: 15px; }
#container .ql_bc_btn a[id^="cmp"]::before { content: "\21C5"; font-size: 14px; }
#container .ql_bc_btn a[id^="fav"]:hover { background: #fff5f5; }
#container .ql_bc_btn a[id^="fav"]:hover::before { content: "\2665"; }
#container .ql_bc_btn a.btn_strong {
    flex: 1 1 auto; margin: 0 4px;
    background: #e1251b; color: #fff; border: 1px solid #e1251b;
}
#container .ql_bc_btn a.btn_strong:hover { background: #c81d14; color: #fff; }

/* 本周热销轮播：书签用橙色区分 */
#container .ql_rc_flag { background: #ff6a00; }

/* ===== 品牌区：默认两行折叠 + 展开/收起 ===== */
#container .catschoose .ql_brandgrid {
    max-height: 108px; overflow: hidden;
}
#container .catschoose .ql_brandgrid.ql_expanded { max-height: 4000px; overflow: visible; }
#container .catschoose .ql_brandtoggle {
    position: absolute; right: 0; top: 60px;
    height: 24px; line-height: 24px; padding: 0 10px;
    background: #fff; border: 1px solid #ddd; color: #666;
    font-size: 12px; cursor: pointer; z-index: 5;
    display: inline-block; box-sizing: border-box;
}
#container .catschoose .ql_brandtoggle:hover { color: #e1251b; border-color: #e1251b; text-decoration: none; }
.ql_brandtoggle .ql_bt_caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #d8322d; }
.ql_brandtoggle.ql_open .ql_bt_caret { border-top: none; border-bottom: 5px solid #d8322d; }
#container .catschoose .ql_branddl { position: relative; }

/* 品牌格容器占满"品牌："标签右侧到最右 */
#container .catschoose ul.operation_area li > dl.ql_branddl > dd { width: auto !important; float: none !important; margin: 0 0 0 84px; overflow: hidden; }
#container .catschoose .ql_brandgrid { width: 100%; float: none; }

/* 热销排行榜 名次角标 */
#container .ql_rankcarousel .ql_hc_card { position: relative; }
#container .ql_rankcarousel .ql_rc_rank {
  position: absolute; top: 0; left: 0; z-index: 4;
  min-width: 20px; height: 20px; padding: 0 4px;
  line-height: 20px; text-align: center;
  font: bold italic 13px/20px Arial, "Microsoft YaHei"; color: #fff;
  background: #b0b0b0; border-radius: 0 0 8px 0;
}
#container .ql_rankcarousel .ql_hc_track .ql_hc_card:nth-child(1) .ql_rc_rank { background: linear-gradient(135deg,#ffcf40,#ff9d00); }
#container .ql_rankcarousel .ql_hc_track .ql_hc_card:nth-child(2) .ql_rc_rank { background: linear-gradient(135deg,#d9d9d9,#9aa3ab); }
#container .ql_rankcarousel .ql_hc_track .ql_hc_card:nth-child(3) .ql_rc_rank { background: linear-gradient(135deg,#e8a87c,#b06d3c); }